@itcenteratunihelsinki/huds-lib 0.9.9 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/hy-ingress.js +1 -1
- package/components/hy-person-profile.js +6 -6
- package/components/hy-two-columns.js +6 -4
- package/components/site-search.js +10 -7
- package/dist/cjs/huds-lib.cjs.js +1 -1
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +11 -8
- package/dist/cjs/hy-person-profile.cjs.entry.js +6 -6
- package/dist/cjs/hy-two-columns.cjs.entry.js +4 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/hy-ingress/ingress.css +4 -36
- package/dist/collection/components/hy-person-profile/person-profile.css +10 -1
- package/dist/collection/components/hy-person-profile/person-profile.js +5 -5
- package/dist/collection/components/hy-site-header/site-search/site-search.css +320 -0
- package/dist/collection/components/hy-site-header/site-search/site-search.js +9 -6
- package/dist/collection/components/hy-two-columns/hy-two-columns.css +11 -0
- package/dist/collection/components/hy-two-columns/hy-two-columns.js +21 -2
- package/dist/esm/huds-lib.js +1 -1
- package/dist/esm/hy-breadcrumbs_15.entry.js +11 -8
- package/dist/esm/hy-person-profile.entry.js +6 -6
- package/dist/esm/hy-two-columns.entry.js +4 -3
- package/dist/esm/loader.js +1 -1
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
- package/dist/huds-lib/hy-person-profile.entry.js +1 -1
- package/dist/huds-lib/hy-two-columns.entry.js +1 -1
- package/dist/types/components/hy-site-header/site-search/site-search.d.ts +1 -0
- package/dist/types/components/hy-two-columns/hy-two-columns.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +2 -2
|
@@ -123,10 +123,19 @@
|
|
|
123
123
|
.hy-profile-page__organizations ul,
|
|
124
124
|
.hy-profile-page__research-organizations,
|
|
125
125
|
.hy-profile-page__research-organizations ul {
|
|
126
|
+
-webkit-box-align: start;
|
|
127
|
+
-ms-flex-align: start;
|
|
128
|
+
align-items: start;
|
|
126
129
|
list-style: none;
|
|
127
130
|
margin: 0;
|
|
128
131
|
padding: 0;
|
|
129
|
-
display:
|
|
132
|
+
display: -webkit-box;
|
|
133
|
+
display: -ms-flexbox;
|
|
134
|
+
display: flex;
|
|
135
|
+
-webkit-box-orient: vertical;
|
|
136
|
+
-webkit-box-direction: normal;
|
|
137
|
+
-ms-flex-direction: column;
|
|
138
|
+
flex-direction: column;
|
|
130
139
|
gap: 8px;
|
|
131
140
|
}
|
|
132
141
|
.hy-profile-page__organizations li,
|
|
@@ -44,19 +44,19 @@ export class PersonProfile {
|
|
|
44
44
|
}, 250);
|
|
45
45
|
});
|
|
46
46
|
const research_portal_title = `${research.research_portal_label}: ${name}`;
|
|
47
|
-
return (h(Host, { key: 'cc770d22acd4544377b926f4ae4e03f4922c2a88' }, h("section", { key: '827f4770c90c4ff5af78d8fe38f68facf036b769', class: "hy-profile-page" }, h("a", { key: '900785d01a9d220edc47aae5163818aafc8eeedc', href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, h("hy-icon", { key: '208c6d35652cb9bf1415b846068c8db2e09ee06b', icon: "hy-icon-arrow-left", size: 24 }), h("span", { key: '46e5f17de38afa4c2847c659bd984b52dbd0bffb' }, this.peopleFinderReturnLabel)), h("section", { key: 'a7041ff6cceceea586b7829588b7e208beb345a0', class: "hy-profile-page__section" }, h("div", { key: '0eee0046efbeca7ae903cd4ad86cd05f26c45e2f', class: "hy-profile-page__person-information" }, h("div", { key: '23d994c1ebd7bd5e301297be70f89bbde45615fe' }, h("h1", { key: '42a3028918193c9e993dd60e165036dc7913390f', class: "hy-profile-page__name" }, name), job_title && h("p", { key: '282c7d4c1a71e06102164037ab6680485c995740', class: "hy-profile-page__job-title" }, job_title), additional_information && (h("p", { key: '9bfb908a7ee1dd831ee22fb3ad85f319e9c3d940', class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (h("div", { key: 'fdb332e9db092b45a5879b7adaab11883f9a0706', class: "hy-profile-page__contact-information" }, contact_information.label && h("h2", { key: '6115b3c6313e6482f11f3e5e2cc149de890f229b' }, contact_information.label), contact_information.items && (h("hy-person-profile-listing", { key: '3e0a11a26bde8db05f140724845e7ad0f2d3aca7', items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))), (organizations.items.length > 0 ||
|
|
47
|
+
return (h(Host, { key: 'cc770d22acd4544377b926f4ae4e03f4922c2a88' }, h("section", { key: '827f4770c90c4ff5af78d8fe38f68facf036b769', class: "hy-profile-page" }, h("a", { key: '900785d01a9d220edc47aae5163818aafc8eeedc', href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, h("hy-icon", { key: '208c6d35652cb9bf1415b846068c8db2e09ee06b', icon: "hy-icon-arrow-left", size: 24 }), h("span", { key: '46e5f17de38afa4c2847c659bd984b52dbd0bffb' }, this.peopleFinderReturnLabel)), h("section", { key: 'a7041ff6cceceea586b7829588b7e208beb345a0', class: "hy-profile-page__section" }, h("div", { key: '0eee0046efbeca7ae903cd4ad86cd05f26c45e2f', class: "hy-profile-page__person-information" }, h("div", { key: '23d994c1ebd7bd5e301297be70f89bbde45615fe' }, h("h1", { key: '42a3028918193c9e993dd60e165036dc7913390f', class: "hy-profile-page__name" }, name), job_title && h("p", { key: '282c7d4c1a71e06102164037ab6680485c995740', class: "hy-profile-page__job-title" }, job_title), additional_information && (h("p", { key: '9bfb908a7ee1dd831ee22fb3ad85f319e9c3d940', class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (h("div", { key: 'fdb332e9db092b45a5879b7adaab11883f9a0706', class: "hy-profile-page__contact-information" }, contact_information.label && h("h2", { key: '6115b3c6313e6482f11f3e5e2cc149de890f229b' }, contact_information.label), contact_information.items && (h("hy-person-profile-listing", { key: '3e0a11a26bde8db05f140724845e7ad0f2d3aca7', items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))), (organizations.items.length > 0 || research_organizations.items.length > 0) && (h("section", { key: 'b38fdc87ba10351fccefb7140c5f234fe1f38287', class: "hy-profile-page__section" }, organization_units.label && h("h2", { key: 'cfb2aa73fa484f14ad62902a58c4e2c7b9aeaa41' }, organization_units.label), organizations.items.length > 0 && (h("section", { key: '1670b10f9517063fa6a377676dc56d3ba651214b', class: "hy-profile-page__organization-units-section" }, h("h3", { key: '5d7964786f6dc0659995c796ead8c34b08d5c211' }, organizations.label), h("ul", { key: 'abb1a0621a54c31b5b379f22cca1dd33ae2540c7', class: "hy-profile-page__organizations" }, h("li", { key: 'f9ac2f19ed0c1ca3c671718c2a0b3e4828c2570d' }, organizations.items.map((item, index) => {
|
|
48
48
|
return (h("span", null, index > 1 && h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index !== 0 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
|
|
49
|
-
"?
|
|
49
|
+
"?hrOrganizations.id[]=" +
|
|
50
50
|
item.id, target: "_blank" }, item.name[organization_units.lang])))));
|
|
51
|
-
}))))), Object.keys(research_organizations.items).length > 0 && (h("section", { key: '
|
|
51
|
+
}))))), Object.keys(research_organizations.items).length > 0 && (h("section", { key: '2ddc88c5f06ff3ac277c9712d53ab23767c3b1d5', class: "hy-profile-page__organization-units-section" }, h("h3", { key: '4113522bef5f2efc055faaa535cf4407569705e7' }, research_organizations.label), h("ul", { key: '8866f531865c226734e0b7610ce8901d4a4c5556', class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map((item, index) => {
|
|
52
52
|
return (h(Fragment, null, index > 1 && (h("ul", null, h("li", null, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
|
|
53
53
|
"?researchOrganizations.id[]=" +
|
|
54
54
|
item.id, target: "_blank" }, item.name[organization_units.lang])))))), index == 1 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
|
|
55
55
|
"?researchOrganizations.id[]=" +
|
|
56
56
|
item.id, target: "_blank" }, item.name[organization_units.lang])))));
|
|
57
|
-
}))))))))), about && aboutDescriptionLength !== 0 && (h("section", { key: '
|
|
57
|
+
}))))))))), about && aboutDescriptionLength !== 0 && (h("section", { key: 'f252f4f5f32df0e3d044648a761e0cec27e381b4', class: "hy-profile-page__section" }, about.description && (h(Fragment, { key: '0677b685159259e0836278e15029e983c76394fd' }, h("h2", { key: '25981c3e02998ef0d48208a30254f085eca7ed80' }, about.label), h("div", { key: '878beb7d9ec82c14a7e396ac6409e73b9ad65e44', class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
|
|
58
58
|
? trimmedAboutDescription
|
|
59
|
-
: about.description }))), aboutDescriptionLength > 650 && (h("button", { key: '
|
|
59
|
+
: about.description }))), aboutDescriptionLength > 650 && (h("button", { key: '8445a77a71b51881ccf9393006fd7cef246d3252', class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? "true" : "false"}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))), ((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (h("section", { key: '7252032cbdd74efde66d97b61ea8abf3bebff702', class: "hy-profile-page__section" }, h("div", { key: '5cc57d6911b7017d0d346cca9acff3ab698fdfa8', class: "hy-profile-page__section__research_title" }, research.label && h("h2", { key: 'ce453d9ca22b73346c522fb5e9040fdd4c1e11a8' }, research.label), research.label && person_content.research_url.length > 0 && (h("hy-cta-button", { key: '36089f12f65b6aca5796d72f190d13bf30652199', "link-content": research_portal_title, "sc-label": research_portal_title, url: person_content.research_url, "is-external": "true", variant: CtaLinkButtonVariants.onWhiteBkgd }))), research.items && (h("hy-person-profile-listing", { key: '50f2928afc1b61e4ca256cc271d68c82b803bc6b', items: research.items, col: "col-1", textSpacingTight: true, "is-research": true, inline: true })), person_content.research_url.length > 0 && (h("div", { key: 'ac652d1531b7cc1f18c4b929424dcb4d9799120e', class: "hy-profile-page__loader", role: "presentation" }, h("div", { key: '37e5bc9a972ba6619c8880ec38e7b69eb88cc420' }), h("div", { key: 'cbe4d189f349961963e4799bbaf4e80a35f8bf62' }), h("div", { key: '4fda88f8d8a1bd9189a539049b13d41aca3c70c2' }), h("div", { key: '3743c1325628992184cb871c4ea1451fd378ec9f' }))), person_content.research_url.length > 0 && this.viewportSize < 768 && (h("div", { key: '9d9725d190aeadcedca8b632e001c78963e36326', class: "hy-profile-page__person-content-container" }, h("div", { key: '0fced962f959823554b67137755b35a8e69aa65d', id: "accordion-container-person-content" }, person_content.publications && (h("ds-accordion", { key: '05dbe3f09df63dbbe7f3bd287da2e82600fc0d01', "ds-heading-level": "3", "data-accordion-id": "publications" }, h("div", { key: 'f20fe325df468024a8da83e9fb5fc15243b5f71d', slot: "header" }, person_content.publications.label), h("div", { key: 'e6e5e209ef1bf2a8c6bd07b7f84ed87acebdbc27', slot: "content", class: "accordion-content" }))), person_content.projects && (h("ds-accordion", { key: '5c4b18287ad477e9cf974345c36f1f07008ca2b1', "ds-heading-level": "3", "data-accordion-id": "projects" }, h("div", { key: '610b651c1f059d18084a170d7373d9bac0dbe2dc', slot: "header" }, person_content.projects.label), h("div", { key: '95220a908d22dec6f7d7937ff5c8652d89d1a311', slot: "content", class: "accordion-content" }))), person_content.activities && (h("ds-accordion", { key: 'b35b56a4dae11d82ab533f136e032f0ba885c0ae', "ds-heading-level": "3", "data-accordion-id": "activities" }, h("div", { key: 'd4e3a05fea502a3cf7041d004311f07b63c2b4c7', slot: "header" }, person_content.activities.label), h("div", { key: '56033a09035b95acca19170cae45b2e5e0b8b682', slot: "content", class: "accordion-content" })))))), person_content.research_url.length > 0 && this.viewportSize >= 768 && (h("div", { key: '4d3dc03c374cf8de10768c912434a2fc4b052f71', class: "hy-profile-page__person-content-container" }, h("hy-tabs", { key: '37f51a03f1c8a1129b332dea3b70c01282616414', "tab-id": "tabs-container-person-content" }, person_content.publications && (h("hy-tabs-item", { key: '1adbe5ba24c0f479e9c658473fcc6ee57c2a34de', "data-tab-id": "publications", "tab-title": person_content.publications.label })), person_content.projects && (h("hy-tabs-item", { key: '308a9cd3147ab2c4b487e9445d42a92308ca110a', "data-tab-id": "projects", "tab-title": person_content.projects.label })), person_content.activities && (h("hy-tabs-item", { key: 'cddaa85724e3663fb22b5505e37cb55f3e37886d', "data-tab-id": "activities", "tab-title": person_content.activities.label }))))))))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "hy-person-profile"; }
|
|
62
62
|
static get originalStyleUrls() {
|
|
@@ -359,4 +359,324 @@
|
|
|
359
359
|
height: 40px;
|
|
360
360
|
padding: 7px;
|
|
361
361
|
width: 40px;
|
|
362
|
+
}
|
|
363
|
+
/*
|
|
364
|
+
Cludo autocomplete
|
|
365
|
+
*/
|
|
366
|
+
#search_autocomplete .cludo-sayt__no-result-text p a:focus,
|
|
367
|
+
#search_autocomplete .cludo-sayt__no-result-text p a:hover,
|
|
368
|
+
#search_autocomplete .cludo-sayt__results-tophit a:focus h3,
|
|
369
|
+
#search_autocomplete .cludo-sayt__results-tophit a:hover h3,
|
|
370
|
+
#search_autocomplete .cludo-sayt__results-tophit-title-link:focus,
|
|
371
|
+
#search_autocomplete .cludo-sayt__results-tophit-title-link:hover,
|
|
372
|
+
#search_autocomplete .cludo-sayt__results-tophit.active h3,
|
|
373
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result a:focus h3,
|
|
374
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result a:hover h3 {
|
|
375
|
+
text-decoration: underline;
|
|
376
|
+
}
|
|
377
|
+
#search_autocomplete {
|
|
378
|
+
position: absolute;
|
|
379
|
+
width: 100%;
|
|
380
|
+
top: 100%;
|
|
381
|
+
left: 0;
|
|
382
|
+
padding: 0;
|
|
383
|
+
z-index: 5;
|
|
384
|
+
}
|
|
385
|
+
#search_autocomplete * {
|
|
386
|
+
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
|
387
|
+
}
|
|
388
|
+
#search_autocomplete h3 {
|
|
389
|
+
font-size: 0.875rem;
|
|
390
|
+
width: -webkit-fit-content;
|
|
391
|
+
width: -moz-fit-content;
|
|
392
|
+
width: fit-content;
|
|
393
|
+
}
|
|
394
|
+
#search_autocomplete .cludo-sayt {
|
|
395
|
+
display: -webkit-box;
|
|
396
|
+
display: -ms-flexbox;
|
|
397
|
+
display: flex;
|
|
398
|
+
-webkit-box-orient: vertical;
|
|
399
|
+
-webkit-box-direction: normal;
|
|
400
|
+
-ms-flex-direction: column;
|
|
401
|
+
flex-direction: column;
|
|
402
|
+
width: 100%;
|
|
403
|
+
background-color: #fff;
|
|
404
|
+
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
|
405
|
+
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
|
406
|
+
margin: 0;
|
|
407
|
+
padding: 12px 15px;
|
|
408
|
+
border: 1px solid #d2d2d2;
|
|
409
|
+
}
|
|
410
|
+
#search_autocomplete .cludo-sayt h3 {
|
|
411
|
+
line-height: 1.25rem;
|
|
412
|
+
}
|
|
413
|
+
#search_autocomplete .cludo-sayt__suggestions {
|
|
414
|
+
border-bottom: 1px solid #d2d2d2;
|
|
415
|
+
}
|
|
416
|
+
#search_autocomplete .cludo-sayt__suggestions > h3 {
|
|
417
|
+
margin: 0;
|
|
418
|
+
white-space: nowrap;
|
|
419
|
+
}
|
|
420
|
+
#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar {
|
|
421
|
+
height: 8px;
|
|
422
|
+
}
|
|
423
|
+
#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar:empty {
|
|
424
|
+
display: none;
|
|
425
|
+
}
|
|
426
|
+
#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb {
|
|
427
|
+
background: #c7c7c7;
|
|
428
|
+
border-radius: 20px;
|
|
429
|
+
cursor: pointer;
|
|
430
|
+
}
|
|
431
|
+
#search_autocomplete .cludo-sayt__suggestions::-webkit-scrollbar-thumb:hover {
|
|
432
|
+
background: #878787;
|
|
433
|
+
}
|
|
434
|
+
#search_autocomplete .cludo-sayt__suggestions-list {
|
|
435
|
+
display: -webkit-box;
|
|
436
|
+
display: -ms-flexbox;
|
|
437
|
+
display: flex;
|
|
438
|
+
gap: 12px;
|
|
439
|
+
overflow-x: scroll;
|
|
440
|
+
overflow-y: hidden;
|
|
441
|
+
padding: 8px 0 12px;
|
|
442
|
+
margin: 0;
|
|
443
|
+
list-style-type: none;
|
|
444
|
+
}
|
|
445
|
+
#search_autocomplete .cludo-sayt__suggestion {
|
|
446
|
+
white-space: nowrap;
|
|
447
|
+
background-color: #f5f5f5;
|
|
448
|
+
padding: 10.05px 18.76px;
|
|
449
|
+
border-radius: 16.75px;
|
|
450
|
+
font-size: 0.813rem;
|
|
451
|
+
cursor: pointer;
|
|
452
|
+
}
|
|
453
|
+
#search_autocomplete .cludo-sayt__suggestion.active,
|
|
454
|
+
#search_autocomplete .cludo-sayt__suggestion:focus,
|
|
455
|
+
#search_autocomplete .cludo-sayt__suggestion:hover {
|
|
456
|
+
color: #107eab;
|
|
457
|
+
text-decoration: underline;
|
|
458
|
+
}
|
|
459
|
+
#search_autocomplete .cludo-sayt__results {
|
|
460
|
+
padding: 1rem 0;
|
|
461
|
+
}
|
|
462
|
+
#search_autocomplete .cludo-sayt__people-search-categories > div {
|
|
463
|
+
margin-top: 24px;
|
|
464
|
+
}
|
|
465
|
+
#search_autocomplete .cludo-sayt__results-tophit-container:not(:last-child) {
|
|
466
|
+
margin-bottom: 24px;
|
|
467
|
+
}
|
|
468
|
+
#search_autocomplete .cludo-sayt__results-tophit-title {
|
|
469
|
+
display: -webkit-box;
|
|
470
|
+
display: -ms-flexbox;
|
|
471
|
+
display: flex;
|
|
472
|
+
gap: 8px;
|
|
473
|
+
-webkit-box-align: center;
|
|
474
|
+
-ms-flex-align: center;
|
|
475
|
+
align-items: center;
|
|
476
|
+
margin: 0 0 16px;
|
|
477
|
+
color: #000;
|
|
478
|
+
font-weight: 600;
|
|
479
|
+
}
|
|
480
|
+
#search_autocomplete .cludo-sayt__results-tophit-title-link {
|
|
481
|
+
color: #107eab;
|
|
482
|
+
font-weight: 600;
|
|
483
|
+
cursor: pointer;
|
|
484
|
+
}
|
|
485
|
+
#search_autocomplete .cludo-sayt__results-tophit-title-no-link {
|
|
486
|
+
color: #107eab;
|
|
487
|
+
font-weight: 600;
|
|
488
|
+
}
|
|
489
|
+
#search_autocomplete .cludo-sayt__no-result-text p {
|
|
490
|
+
margin: 0;
|
|
491
|
+
padding: 0;
|
|
492
|
+
color: #222;
|
|
493
|
+
font-size: 0.875rem;
|
|
494
|
+
font-weight: 600;
|
|
495
|
+
}
|
|
496
|
+
#search_autocomplete .cludo-sayt__no-result-text p a {
|
|
497
|
+
color: #107eab;
|
|
498
|
+
text-decoration: none;
|
|
499
|
+
cursor: pointer;
|
|
500
|
+
}
|
|
501
|
+
#search_autocomplete .cludo-sayt__results-tophits {
|
|
502
|
+
margin: 0;
|
|
503
|
+
padding: 0;
|
|
504
|
+
list-style-type: none;
|
|
505
|
+
}
|
|
506
|
+
#search_autocomplete .cludo-sayt__results-tophit:not(:last-of-type) {
|
|
507
|
+
margin-bottom: 16px;
|
|
508
|
+
}
|
|
509
|
+
#search_autocomplete .cludo-sayt__results-tophit.tool a {
|
|
510
|
+
display: -webkit-box !important;
|
|
511
|
+
display: -ms-flexbox !important;
|
|
512
|
+
display: flex !important;
|
|
513
|
+
gap: 8px;
|
|
514
|
+
-webkit-box-align: center;
|
|
515
|
+
-ms-flex-align: center;
|
|
516
|
+
align-items: center;
|
|
517
|
+
}
|
|
518
|
+
#search_autocomplete .cludo-sayt__results-tophit.tool a .cludo-sayt__tool {
|
|
519
|
+
display: -webkit-box;
|
|
520
|
+
display: -ms-flexbox;
|
|
521
|
+
display: flex;
|
|
522
|
+
-webkit-box-align: center;
|
|
523
|
+
-ms-flex-align: center;
|
|
524
|
+
align-items: center;
|
|
525
|
+
-webkit-box-pack: center;
|
|
526
|
+
-ms-flex-pack: center;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
width: 34px;
|
|
529
|
+
height: 34px;
|
|
530
|
+
border-radius: 5px;
|
|
531
|
+
background-color: #107eab;
|
|
532
|
+
color: #fff;
|
|
533
|
+
font-size: 14px;
|
|
534
|
+
font-weight: 600;
|
|
535
|
+
}
|
|
536
|
+
#search_autocomplete .cludo-sayt__results-tophit a {
|
|
537
|
+
display: block;
|
|
538
|
+
font-weight: 600;
|
|
539
|
+
font-size: 0.875rem;
|
|
540
|
+
text-decoration: none;
|
|
541
|
+
cursor: pointer;
|
|
542
|
+
}
|
|
543
|
+
#search_autocomplete .cludo-sayt__results-tophit a h3 {
|
|
544
|
+
font-weight: 500;
|
|
545
|
+
color: #222;
|
|
546
|
+
margin: 0;
|
|
547
|
+
}
|
|
548
|
+
#search_autocomplete .cludo-sayt__results-tophit a span {
|
|
549
|
+
color: #979797;
|
|
550
|
+
font-size: 0.688rem;
|
|
551
|
+
}
|
|
552
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result a {
|
|
553
|
+
display: -webkit-box;
|
|
554
|
+
display: -ms-flexbox;
|
|
555
|
+
display: flex;
|
|
556
|
+
gap: 8px;
|
|
557
|
+
color: #222;
|
|
558
|
+
}
|
|
559
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image {
|
|
560
|
+
display: -webkit-box;
|
|
561
|
+
display: -ms-flexbox;
|
|
562
|
+
display: flex;
|
|
563
|
+
-webkit-box-align: center;
|
|
564
|
+
-ms-flex-align: center;
|
|
565
|
+
align-items: center;
|
|
566
|
+
-webkit-box-pack: center;
|
|
567
|
+
-ms-flex-pack: center;
|
|
568
|
+
justify-content: center;
|
|
569
|
+
width: 60px;
|
|
570
|
+
min-width: 60px;
|
|
571
|
+
height: 60px;
|
|
572
|
+
min-height: 60px;
|
|
573
|
+
border-radius: 0;
|
|
574
|
+
background-color: var(--brand-main-light);
|
|
575
|
+
background-size: cover;
|
|
576
|
+
color: var(--grayscale-white);
|
|
577
|
+
font-size: 1rem;
|
|
578
|
+
line-height: 32px;
|
|
579
|
+
font-weight: 700;
|
|
580
|
+
letter-spacing: 0.48px;
|
|
581
|
+
overflow: hidden;
|
|
582
|
+
}
|
|
583
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__image img {
|
|
584
|
+
width: 100%;
|
|
585
|
+
}
|
|
586
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content h3 {
|
|
587
|
+
font-size: 1rem;
|
|
588
|
+
font-weight: 700;
|
|
589
|
+
}
|
|
590
|
+
#search_autocomplete .cludo-sayt__results-tophit.people-result .people-result__content p {
|
|
591
|
+
margin: 0;
|
|
592
|
+
font-weight: 400;
|
|
593
|
+
}
|
|
594
|
+
#search_autocomplete .cludo-sayt__all-results {
|
|
595
|
+
border-top: 1px solid #d2d2d2;
|
|
596
|
+
padding-top: 16px;
|
|
597
|
+
}
|
|
598
|
+
@media (min-width: 931px) {
|
|
599
|
+
#search_autocomplete .cludo-sayt {
|
|
600
|
+
width: 100%;
|
|
601
|
+
background-color: #fff;
|
|
602
|
+
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
|
603
|
+
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
|
604
|
+
margin: 0;
|
|
605
|
+
padding: 0 16px;
|
|
606
|
+
border: 1px solid #d2d2d2;
|
|
607
|
+
}
|
|
608
|
+
#search_autocomplete .cludo-sayt__suggestions {
|
|
609
|
+
display: -webkit-box;
|
|
610
|
+
display: -ms-flexbox;
|
|
611
|
+
display: flex;
|
|
612
|
+
-webkit-box-align: center;
|
|
613
|
+
-ms-flex-align: center;
|
|
614
|
+
align-items: center;
|
|
615
|
+
gap: 12px;
|
|
616
|
+
overflow-x: scroll;
|
|
617
|
+
overflow-y: hidden;
|
|
618
|
+
}
|
|
619
|
+
#search_autocomplete .cludo-sayt__suggestions-list {
|
|
620
|
+
overflow: visible;
|
|
621
|
+
padding: 12px 0;
|
|
622
|
+
}
|
|
623
|
+
#search_autocomplete .cludo-sayt__results {
|
|
624
|
+
padding: 0;
|
|
625
|
+
display: grid;
|
|
626
|
+
grid-template-columns: 1fr 1fr;
|
|
627
|
+
}
|
|
628
|
+
#search_autocomplete .cludo-sayt__main-search-categories {
|
|
629
|
+
padding: 1rem;
|
|
630
|
+
}
|
|
631
|
+
#search_autocomplete .cludo-sayt__people-search-categories {
|
|
632
|
+
border-left: 1px solid #d2d2d2;
|
|
633
|
+
padding: 1rem;
|
|
634
|
+
}
|
|
635
|
+
#search_autocomplete .cludo-sayt__people-search-categories > div {
|
|
636
|
+
margin-top: 0;
|
|
637
|
+
}
|
|
638
|
+
#search_autocomplete .cludo-sayt__all-results {
|
|
639
|
+
padding: 16px 0;
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
#search_autocomplete .cludo-sayt__all-results a {
|
|
643
|
+
display: -webkit-box;
|
|
644
|
+
display: -ms-flexbox;
|
|
645
|
+
display: flex;
|
|
646
|
+
-webkit-box-align: center;
|
|
647
|
+
-ms-flex-align: center;
|
|
648
|
+
align-items: center;
|
|
649
|
+
gap: 8px;
|
|
650
|
+
width: -webkit-fit-content;
|
|
651
|
+
width: -moz-fit-content;
|
|
652
|
+
width: fit-content;
|
|
653
|
+
margin: 0 auto;
|
|
654
|
+
border: none;
|
|
655
|
+
background-color: #107eab;
|
|
656
|
+
color: #fff;
|
|
657
|
+
font-weight: 700;
|
|
658
|
+
font-size: 1rem;
|
|
659
|
+
padding: 13px 16px;
|
|
660
|
+
cursor: pointer;
|
|
661
|
+
}
|
|
662
|
+
#search_autocomplete .cludo-sayt__all-results a:focus,
|
|
663
|
+
#search_autocomplete .cludo-sayt__all-results a:hover {
|
|
664
|
+
background: #005379;
|
|
665
|
+
}
|
|
666
|
+
#search_autocomplete .cludo-sayt__other {
|
|
667
|
+
padding: 22px 0;
|
|
668
|
+
}
|
|
669
|
+
#search_autocomplete .cludo-sayt__other h3 {
|
|
670
|
+
font-size: 18px;
|
|
671
|
+
letter-spacing: -0.56px;
|
|
672
|
+
margin-bottom: 7.5px;
|
|
673
|
+
}
|
|
674
|
+
.cludo-sr-only {
|
|
675
|
+
position: absolute;
|
|
676
|
+
width: 1px;
|
|
677
|
+
height: 1px;
|
|
678
|
+
padding: 0;
|
|
679
|
+
overflow: hidden;
|
|
680
|
+
clip: rect(0, 0, 0, 0);
|
|
681
|
+
border: 0;
|
|
362
682
|
}
|
|
@@ -95,6 +95,9 @@ export class SiteSearch {
|
|
|
95
95
|
// Without setTimeout it will not focus the input because it hasn't rendered yet.
|
|
96
96
|
setTimeout(() => {
|
|
97
97
|
const searchInput = this.el.shadowRoot.querySelector("input#search");
|
|
98
|
+
if (window.registerNavSearchInput && searchInput) {
|
|
99
|
+
window.registerNavSearchInput('#cludo-search-form input#search');
|
|
100
|
+
}
|
|
98
101
|
searchInput === null || searchInput === void 0 ? void 0 : searchInput.focus();
|
|
99
102
|
});
|
|
100
103
|
}
|
|
@@ -107,24 +110,24 @@ export class SiteSearch {
|
|
|
107
110
|
render() {
|
|
108
111
|
const currentPageUrlPathName = window.location.pathname;
|
|
109
112
|
const searchPagePathNames = ["/fi/haku", "/en/search", "/sv/sök"];
|
|
110
|
-
return (h("div", { key: '
|
|
113
|
+
return (h("div", { key: '14308fcbac8e2b4c7e7b4a3393b8ddbc48ada624', class: {
|
|
111
114
|
"site-search": true,
|
|
112
115
|
"site-search__is-open": this.isSearchPanelOpen,
|
|
113
116
|
"is-group": this.isGroup,
|
|
114
|
-
} }, h("button", { key: '
|
|
117
|
+
} }, h("button", { key: '99285de74d03d93fae04aa14781f3465d4afa2dd', "aria-label": this.showLabel ? this._labels["open"] : "", "aria-expanded": `${this.isSearchPanelOpen}`, class: {
|
|
115
118
|
"button--search": true,
|
|
116
119
|
"is-open--menu": this.isAlternative,
|
|
117
120
|
"is-open": this.isSearchPanelOpen,
|
|
118
121
|
"is-active": searchPagePathNames.some((item) => item === currentPageUrlPathName),
|
|
119
|
-
}, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { "button--search__label": true, "button--search__label__group": this.isGroup } }, this._labels["label"])) : (""), h("hy-icon", { key: '
|
|
122
|
+
}, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false }, this.showLabel ? (h("span", { class: { "button--search__label": true, "button--search__label__group": this.isGroup } }, this._labels["label"])) : (""), h("hy-icon", { key: 'f609b6379b4d3be08c203f7b00d6b231e7135e7d', icon: "hy-icon-search", size: this.size, fill: this.color })), (!this.isLuomusGroup && this.isSearchPanelOpen) && (h("div", { key: '77a1cb514c734d144a6e17e0f892edbe09508d9d', class: {
|
|
120
123
|
"site-search__panel": true,
|
|
121
124
|
"site-search__panel__is-open": this.isSearchPanelOpen,
|
|
122
|
-
}, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: '
|
|
125
|
+
}, "aria-hidden": `${!this.isSearchPanelOpen}` }, h("div", { key: 'f1d57468a0d5188b138854b44a68ad6b45c6aff5', class: "site-search__panel__content" }, h("div", { key: '5ac01fafec4b9b0bc210eb9ec6065275f819b077', class: "site-search__panel__wrapper" }, h("div", { key: 'f0d2267d4045c0398d251461f43e7361ff906e7d', class: "site-search__panel__title" }, h("div", { key: '858202623ac82e4cbc75d7d66e668c5996f7d1a9', class: "site-search__panel__title__group" }, h("span", { key: '1d6b1d760629248039847b6a64b3e33c5e7c4249', class: "panel-title" }, this.searchTitleLabel), h("div", { key: '430867474c934f0d562673c60064f0b648fa43a2', class: "description" }, this.searchDescriptionLabel))), h("div", { key: 'b081666de8a7e01d68f3ed067a01ee7c76efe340', id: "cludo-search-results", class: "container_12" }, h("div", { key: 'f00c982e682076d504b45a96e194bfd8fd031d5d', class: "search-banner" }), h("div", { key: 'b1e748ca993e15b8f9247d1e47ecc05f98b1be9d', class: "search-filters search-filters-mobile" }), h("div", { key: '361b42614a73eca060df72392c295e1442f3544b', class: "col-md-12" }, h("div", { key: '7f53b4d4a31fed81263c9681cb394d80111894a6', style: { margin: "20px 0 32px" }, id: "cludo-search-content-form" }, h("hy-search-field", { key: 'afd8412f607636cd8022feb96ad9a53021d6ba82', "input-id": "search", label: "" }))), h("div", { key: '209b848f4c5c16e51e4d78da3a394c3714861aa8', class: "col-md-3" }, h("div", { key: '5bf7e7a5d5218a11174758356c3fe8b9ef7b6e1e', class: "search-filters", "aria-controls": "search-results" })), h("div", { key: 'a801c5fdbb998e6c2dfa6457c25ff7ed18d6e561', class: "col-md-9" }, h("div", { key: '36e3d2b77d365ff50d2542f288d134769d9a77cd', class: "search-results-container" }, h("hy-paragraph-text", { key: '223f7604ab9a457ae375bb6bd81b7643450c384c' }, h("div", { key: '3315875631f74684d7416544462fc6804f213187', class: "search-result-count" })), h("div", { key: '645c792076ad5a67fa27907630518d47b2ff1796', class: "search-did-you-mean", role: "Complementary" }), h("div", { key: 'ce78be3a28bb44aa4a29cf7905c653ea6cfc14ea', class: "search-results", role: "region", id: "search-results", "aria-live": "polite" })))), this._searchTools && this._searchTools.length > 0 && (h("div", { key: '4a6f518bf6d40be1e82ff1bcbe9aee1d3575ebcd', class: "site-search__panel__tools" }, h("div", { key: 'a3cd2c0329258d5d7d0795aa0f2705badc679903', class: "title" }, this.searchToolsLabel), h("div", { key: 'd069bbf2cb1d48683b66c15359e5e97a2ea6eece', class: "list" }, this._searchTools.map((i) => {
|
|
123
126
|
let searchToolTarget = i.isExternal ? "_blank" : "_self";
|
|
124
127
|
return (h("a", { class: "search-special-tool", href: i.url, target: searchToolTarget }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24, fill: ColorVariant.black }), h("span", { class: "label" }, i.label), h("span", { class: "description" }, i.description)));
|
|
125
|
-
})))), h("button", { key: '
|
|
128
|
+
})))), h("button", { key: '06a6bdcec4873807cb9b08ff615842fc7409f0f7', onClick: () => this.closeSearchPanel(), class: {
|
|
126
129
|
"site-search__panel__panel-toggle": true,
|
|
127
|
-
}, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: '
|
|
130
|
+
}, "aria-label": this.searchCloseLabel, "aria-expanded": `${this.isSearchPanelOpen}` }, h("span", { key: 'ba2030a8c26279c9531018e9d7223ba1c389703e', class: "site-search__panel__panel-toggle__label" }, h("span", { key: 'ff78542648700dc2091aae9fb91021732571b7c1', class: "site-search__panel__panel-toggle__label__title", tabindex: "0" }, this.searchCloseLabel), h("hy-icon", { key: '77e09522c187f3a5a2c56c7e5570703c696547dc', icon: "hy-icon-remove", size: 16, fill: ColorVariant.black })))), h("div", { key: 'fba05c54c93798a58549aa126cffb676376821c7', class: "site-search__panel__space-box", onClick: () => this.closeSearchPanel() }))))));
|
|
128
131
|
}
|
|
129
132
|
static get is() { return "hy-site-search"; }
|
|
130
133
|
static get encapsulation() { return "shadow"; }
|
|
@@ -67,6 +67,17 @@
|
|
|
67
67
|
margin-right: 8.5%;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
+
@media (max-width: 30rem) {
|
|
71
|
+
.hy-two-columns--mobile-reversed {
|
|
72
|
+
-webkit-box-orient: vertical;
|
|
73
|
+
-webkit-box-direction: reverse;
|
|
74
|
+
-ms-flex-direction: column-reverse;
|
|
75
|
+
flex-direction: column-reverse;
|
|
76
|
+
}
|
|
77
|
+
.hy-two-columns--mobile-reversed .hy-two-columns__item--side {
|
|
78
|
+
margin-top: 5.79%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
70
81
|
.hy-two-columns__item {
|
|
71
82
|
width: 100%;
|
|
72
83
|
}
|
|
@@ -2,10 +2,11 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class HyTwoColumns {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.reversed = false;
|
|
5
|
+
this.mobileReversed = false;
|
|
5
6
|
}
|
|
6
7
|
render() {
|
|
7
|
-
const classAttributes = ["hy-two-columns", this.reversed ? "hy-two-columns--reversed" : ""].join(" ");
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
const classAttributes = ["hy-two-columns", this.reversed ? "hy-two-columns--reversed" : "", this.mobileReversed ? "hy-two-columns--mobile-reversed" : ""].join(" ");
|
|
9
|
+
return (h(Host, { key: '35b7ab51ce3a442279e127bfb5a13bfd7fc28ec7' }, h("div", { key: '446fc388d6ea326a0cf6b6578eb45b5e3c175fbd', class: classAttributes }, h("div", { key: 'bd427d91a6dad1d66f7c39846d2da273fb143c31', class: "hy-two-columns__item hy-two-columns__item--main" }, h("slot", { key: '576803c2ea89d7aeac4304f05aae0b10347afae4', name: "main" })), h("div", { key: '033dbddf96acce2ad1513f0069edda7385334ca4', class: "hy-two-columns__item hy-two-columns__item--side" }, h("slot", { key: 'e6b29529caa6b2a713822d7e2b7deae133da037a', name: "side" })))));
|
|
9
10
|
}
|
|
10
11
|
static get is() { return "hy-two-columns"; }
|
|
11
12
|
static get originalStyleUrls() {
|
|
@@ -37,6 +38,24 @@ export class HyTwoColumns {
|
|
|
37
38
|
"attribute": "reversed",
|
|
38
39
|
"reflect": false,
|
|
39
40
|
"defaultValue": "false"
|
|
41
|
+
},
|
|
42
|
+
"mobileReversed": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"mutable": false,
|
|
45
|
+
"complexType": {
|
|
46
|
+
"original": "boolean",
|
|
47
|
+
"resolved": "boolean",
|
|
48
|
+
"references": {}
|
|
49
|
+
},
|
|
50
|
+
"required": false,
|
|
51
|
+
"optional": false,
|
|
52
|
+
"docs": {
|
|
53
|
+
"tags": [],
|
|
54
|
+
"text": ""
|
|
55
|
+
},
|
|
56
|
+
"attribute": "mobile-reversed",
|
|
57
|
+
"reflect": false,
|
|
58
|
+
"defaultValue": "false"
|
|
40
59
|
}
|
|
41
60
|
};
|
|
42
61
|
}
|