@itcenteratunihelsinki/huds-lib 0.8.70 → 0.8.72
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-content-list.js +26 -31
- package/components/hy-content-list.js.map +1 -1
- package/components/hy-footer-info.js +1 -1
- package/components/hy-footer-info.js.map +1 -1
- package/components/hy-footer-link-item2.js +2 -2
- package/components/hy-footer-link-item2.js.map +1 -1
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +3 -3
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js.map +1 -1
- package/dist/cjs/hy-content-list_2.cjs.entry.js +26 -31
- package/dist/cjs/hy-content-list_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/footer/hy-footer-info/hy-footer-info.css +2 -2
- package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css +8 -1
- package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.js +1 -1
- package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.js.map +1 -1
- package/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js +26 -31
- package/dist/collection/components/hy-content-lists/hy-content-list/hy-content-list.js.map +1 -1
- package/dist/esm/hy-breadcrumbs_15.entry.js +3 -3
- package/dist/esm/hy-breadcrumbs_15.entry.js.map +1 -1
- package/dist/esm/hy-content-list_2.entry.js +26 -31
- package/dist/esm/hy-content-list_2.entry.js.map +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js.map +1 -1
- package/dist/huds-lib/hy-content-list_2.entry.js +1 -1
- package/dist/huds-lib/hy-content-list_2.entry.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as i,H as e,g as n}from"./index-f84f2a7d.js";import{j as a,k as r}from"./utils-2819fd7e.js";import{j as o}from"./globalScript-5a4b7abf.js";const l=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";const s=class{constructor(i){t(this,i);this.variant=a.default;this.linkLabel="Go to course page";this.noResultLabel="No courses scheduled at the moment";this.creditsLabel="cr";this.cancelledLabel="Cancelled";this.dataItems=undefined;this.headerstyle="common";this.courseStateVariant=r.default;this.courseRealisations=[]}dataWatcher(t){this._dataItems=typeof t==="string"?JSON.parse(t):t}componentWillLoad(){this.dataWatcher(this.dataItems)}handleCardClick(t,i){t.preventDefault();let e=this.el.querySelector(`#${i}`);if(e){window.open(e.dataset.location,"_blank")}}async componentDidLoad(){let t=this.el.closest(".hy-main");if(t){if(!t.classList.contains("with-sidebar")){this.headerstyle="large"}}}renderItems(){let t=[];if(this._dataItems&&this._dataItems.length>0){this._dataItems.forEach((e=>{const n=JSON.parse(JSON.stringify(e));const r=n["courseListType"];this.variant=r=="list"?a.row:a.grid;for(const e in n){if(e=="courseListType")continue;const a=n[e];const r=a["code"];const o=a["credits"];if(a["realisations"]){const e=JSON.parse(JSON.stringify(a["realisations"]));for(const n in e){const a=e[n];const l=a["name"];const s=l+", "+o+" "+this.creditsLabel;const d=a["studyFormat"];const c=a["cancelled"];const m=a["startDate"];const h=a["endDate"];const g=a["formattedTimeRange"];const p=a["enrolmentLink"];const b=a["teachingLanguage"];const y=a["organisation"];let x=[];if(a["tags"]){let t=JSON.parse(JSON.stringify(a["tags"]));for(let i in t){let e={name:t[i]};x.push(e)}}const f=JSON.stringify(x);const w=["item",this.variant].join(" ");t.push(i("hy-content-list-item",{id:n,class:w,variant:this.variant,"state-variant":this.courseStateVariant,"course-code":r,"course-name":s,"is-cancelled":c,"cancelled-label":this.cancelledLabel,"course-credits":o,"course-tags":f,"course-start-date":m,"course-end-date":h,"formatted-time-range":g,"course-study-format":d,"course-organisation":y,"course-enrollment-link":p,"course-teaching-language":b,"course-link-label":this.linkLabel,"data-location":p,onClick:t=>this.handleCardClick(t,n)}))}}}}))}return t}render(){const t=[this.variant,"hy-content-list"].join(" ");const n=["hy-content-list--alert",`hy-content-list--alert--${this.headerstyle}`].join(" ");const a=["hy-content-list--alert-label",`hy-content-list--alert-label--${this.headerstyle}`].join(" ");this.courseRealisations=this.renderItems();if(this.courseRealisations&&this.courseRealisations.length>0){return i(e,null,i("div",{class:t},this.courseRealisations))}else{return i(e,null,i("div",{class:t},i("div",{class:"hy-content-list--no-result"},i("span",{class:n},i("hy-icon",{icon:"hy-icon-info",size:16})),i("span",{class:a},this.noResultLabel))))}}get el(){return n(this)}static get watchers(){return{dataItems:["dataWatcher"]}}};s.style=l;const d=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}hy-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:"|";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:" "}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}';let c={enter:"Enter"};const m=class{constructor(i){t(this,i);this.variant=a.default;this.stateVariant=r.default;this.courseCode=undefined;this.courseName=undefined;this.isCancelled=undefined;this.cancelledLabel="Cancelled";this.courseCredits=undefined;this.courseTags=undefined;this.courseStartDate=undefined;this.courseEndDate=undefined;this.formattedTimeRange=undefined;this.courseStudyFormat=undefined;this.courseOrganisation=undefined;this.courseEnrollmentLink=undefined;this.courseTeachingLanguage=undefined;this.courseLinkLabel=undefined}async componentWillLoad(){this._courseTags=await o(this.courseTags)}handleKeyDown(t){const i=t.code;if(i==c.enter){let t=this.el;window.open(t.dataset.location,"_blank","noopener")}}render(){const t=[this.variant,"hy-content-list-item"].join(" ");const e="_blank";const n="Link points outside the current website.";const a=["hy-content-list-item--item-name",`hy-content-list-item--item-name--${this.stateVariant}`].join(" ");const r=["cancelled",`cancelled--${this.stateVariant}`].join(" ");return[i("div",{class:t,tabindex:"0"},i("div",{class:a},this.courseName),i("div",{class:"hy-content-list-item--metadata"},this.isCancelled&&i("div",{class:r},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first"},i("span",null,this.formattedTimeRange)),this.courseOrganisation?[i("div",{class:"hy-content-list-item--metadata--item"},i("span",null,this.courseStudyFormat)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseOrganisation))]:[i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseStudyFormat))]),this._courseTags&&this._courseTags.length>0&&i("div",{class:"hy-content-list-item--tags"},this._courseTags.map((t=>i("hy-tag",null,t.name)))),this.isCancelled&&i("div",{class:"cancelled mobile"},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--link"},i("a",{href:this.courseEnrollmentLink,target:e,"aria-label":n,class:"hy-content-list-item--link--link",tabindex:"-1"},i("span",{class:"label"},this.courseLinkLabel),i("span",{class:"icon-wrapper"},i("div",{class:"icon"},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:40}))))))]}get el(){return n(this)}};m.style=d;export{s as hy_content_list,m as hy_content_list_item};
|
|
1
|
+
import{r as t,h as i,H as e,g as n}from"./index-f84f2a7d.js";import{j as a,k as r}from"./utils-2819fd7e.js";import{j as o}from"./globalScript-5a4b7abf.js";const l=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";const s=class{constructor(i){t(this,i);this.variant=a.default;this.linkLabel="Go to course page";this.noResultLabel="No courses scheduled at the moment";this.creditsLabel="cr";this.cancelledLabel="Cancelled";this.dataItems=undefined;this.headerstyle="common";this.courseStateVariant=r.default;this.courseRealisations=[]}dataWatcher(t){this._dataItems=typeof t==="string"?JSON.parse(t):t}componentWillLoad(){this.dataWatcher(this.dataItems)}handleCardClick(t,i){t.preventDefault();let e=this.el.querySelector(`#${i}`);if(e){window.open(e.dataset.location,"_blank")}}async componentDidLoad(){let t=this.el.closest(".hy-main");if(t){if(!t.classList.contains("with-sidebar")){this.headerstyle="large"}}}renderItems(){let t=[];if(this._dataItems&&this._dataItems.length>0){this._dataItems.forEach((e=>{const n=JSON.parse(JSON.stringify(e));const r=n["courseListType"];this.variant=r=="list"?a.row:a.grid;const o=n["code"];const l=n["credits"];if(n["realisations"]){const e=JSON.parse(JSON.stringify(n["realisations"]));for(const n in e){const a=e[n];const r=a["name"];const s=r+", "+l+" "+this.creditsLabel;const d=a["studyFormat"];const c=a["cancelled"];const m=a["startDate"];const h=a["endDate"];const g=a["formattedTimeRange"];const p=a["enrolmentLink"];const b=a["teachingLanguage"];const y=a["organisation"];let x=[];if(a["tags"]){let t=JSON.parse(JSON.stringify(a["tags"]));for(let i in t){let e={name:t[i]};x.push(e)}}const f=JSON.stringify(x);const w=["item",this.variant].join(" ");t.push(i("hy-content-list-item",{id:n,class:w,variant:this.variant,"state-variant":this.courseStateVariant,"course-code":o,"course-name":s,"is-cancelled":c,"cancelled-label":this.cancelledLabel,"course-credits":l,"course-tags":f,"course-start-date":m,"course-end-date":h,"formatted-time-range":g,"course-study-format":d,"course-organisation":y,"course-enrollment-link":p,"course-teaching-language":b,"course-link-label":this.linkLabel,"data-location":p,onClick:t=>this.handleCardClick(t,n)}))}}}))}return t}render(){const t=[this.variant,"hy-content-list"].join(" ");const n=["hy-content-list--alert",`hy-content-list--alert--${this.headerstyle}`].join(" ");const a=["hy-content-list--alert-label",`hy-content-list--alert-label--${this.headerstyle}`].join(" ");this.courseRealisations=this.renderItems();if(this.courseRealisations&&this.courseRealisations.length>0){return i(e,null,i("div",{class:t},this.courseRealisations))}else{return i(e,null,i("div",{class:t},i("div",{class:"hy-content-list--no-result"},i("span",{class:n},i("hy-icon",{icon:"hy-icon-info",size:16})),i("span",{class:a},this.noResultLabel))))}}get el(){return n(this)}static get watchers(){return{dataItems:["dataWatcher"]}}};s.style=l;const d=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}hy-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:"|";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:" "}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}';let c={enter:"Enter"};const m=class{constructor(i){t(this,i);this.variant=a.default;this.stateVariant=r.default;this.courseCode=undefined;this.courseName=undefined;this.isCancelled=undefined;this.cancelledLabel="Cancelled";this.courseCredits=undefined;this.courseTags=undefined;this.courseStartDate=undefined;this.courseEndDate=undefined;this.formattedTimeRange=undefined;this.courseStudyFormat=undefined;this.courseOrganisation=undefined;this.courseEnrollmentLink=undefined;this.courseTeachingLanguage=undefined;this.courseLinkLabel=undefined}async componentWillLoad(){this._courseTags=await o(this.courseTags)}handleKeyDown(t){const i=t.code;if(i==c.enter){let t=this.el;window.open(t.dataset.location,"_blank","noopener")}}render(){const t=[this.variant,"hy-content-list-item"].join(" ");const e="_blank";const n="Link points outside the current website.";const a=["hy-content-list-item--item-name",`hy-content-list-item--item-name--${this.stateVariant}`].join(" ");const r=["cancelled",`cancelled--${this.stateVariant}`].join(" ");return[i("div",{class:t,tabindex:"0"},i("div",{class:a},this.courseName),i("div",{class:"hy-content-list-item--metadata"},this.isCancelled&&i("div",{class:r},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first"},i("span",null,this.formattedTimeRange)),this.courseOrganisation?[i("div",{class:"hy-content-list-item--metadata--item"},i("span",null,this.courseStudyFormat)),i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseOrganisation))]:[i("div",{class:"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last"},i("span",null,this.courseStudyFormat))]),this._courseTags&&this._courseTags.length>0&&i("div",{class:"hy-content-list-item--tags"},this._courseTags.map((t=>i("hy-tag",null,t.name)))),this.isCancelled&&i("div",{class:"cancelled mobile"},i("span",null,this.cancelledLabel)),i("div",{class:"hy-content-list-item--link"},i("a",{href:this.courseEnrollmentLink,target:e,"aria-label":n,class:"hy-content-list-item--link--link",tabindex:"-1"},i("span",{class:"label"},this.courseLinkLabel),i("span",{class:"icon-wrapper"},i("div",{class:"icon"},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:40}))))))]}get el(){return n(this)}};m.style=d;export{s as hy_content_list,m as hy_content_list_item};
|
|
2
2
|
//# sourceMappingURL=hy-content-list_2.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseProperty","courseItem","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-content-list {\n display: flex;\n font-family: var(--main-font-family);\n flex-wrap: wrap;\n\n &--no-result {\n align-items: center;\n display: flex;\n }\n &--alert {\n margin-right: 6px;\n svg {\n fill: var(--grayscale-dark);\n }\n @include breakpoint($xlarge) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n &--large {\n @include breakpoint($overwide) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &--alert-label {\n font-family: var(--main-font-family);\n @include font-size(15px, 22px);\n color: var(--grayscale-dark);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n &--large {\n @include breakpoint($overwide) {\n @include font-size(17px, 26px);\n }\n }\n }\n}\n\n.hy-content-list.row {\n flex-direction: column;\n}\n\n.hy-content-list.grid {\n flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-content-list\",\n styleUrl: \"hy-content-list.scss\",\n shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n @Prop() linkLabel: string = \"Go to course page\";\n @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n @Prop() creditsLabel: string = \"cr\";\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() dataItems: string;\n @Prop() headerstyle: string = \"common\";\n @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n private _dataItems: [];\n private variant: CourseVariants = CourseVariants.default;\n @State() courseRealisations: Array<object> = [];\n @Element() el: HTMLElement;\n /**\n * Data for links to be displayed.\n */\n\n @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.dataWatcher(this.dataItems);\n }\n\n handleCardClick(e, id) {\n e.preventDefault();\n let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n if (card) {\n window.open(card.dataset.location, \"_blank\");\n }\n }\n\n async componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n renderItems() {\n let courseRealisations = [];\n if (this._dataItems && this._dataItems.length > 0) {\n this._dataItems.forEach((item) => {\n const courseObject = JSON.parse(JSON.stringify(item));\n\n const courseListType = courseObject[\"courseListType\"];\n this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n for (const courseProperty in courseObject) {\n if (courseProperty == \"courseListType\") continue;\n\n const courseItem = courseObject[courseProperty];\n const courseCode = courseItem[\"code\"];\n const courseCredits = courseItem[\"credits\"];\n\n // Course realisations.\n if (courseItem[\"realisations\"]) {\n const realisations = JSON.parse(JSON.stringify(courseItem[\"realisations\"]));\n for (const realisationProperty in realisations) {\n const realizationItem = realisations[realisationProperty];\n const courseRealisationName = realizationItem[\"name\"];\n const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n const courseStudyFormat = realizationItem[\"studyFormat\"];\n const courseCancelled = realizationItem[\"cancelled\"];\n const courseStartDate = realizationItem[\"startDate\"];\n const courseEndDate = realizationItem[\"endDate\"];\n const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n const courseOrganisation = realizationItem[\"organisation\"];\n\n let courseTags = [];\n if (realizationItem[\"tags\"]) {\n let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n for (let z in tags) {\n let tagItem = {name: tags[z]};\n courseTags.push(tagItem);\n }\n }\n const courseTagsJSON = JSON.stringify(courseTags);\n\n const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n courseRealisations.push(\n <hy-content-list-item\n id={realisationProperty}\n class={contentListItemClassAttributes}\n variant={this.variant}\n state-variant={this.courseStateVariant}\n course-code={courseCode}\n course-name={courseRealisationFullName}\n is-cancelled={courseCancelled}\n cancelled-label={this.cancelledLabel}\n course-credits={courseCredits}\n course-tags={courseTagsJSON}\n course-start-date={courseStartDate}\n course-end-date={courseEndDate}\n formatted-time-range={formattedTimeRange}\n course-study-format={courseStudyFormat}\n course-organisation={courseOrganisation}\n course-enrollment-link={courseEnrollmentLink}\n course-teaching-language={courseTeachingLanguage}\n course-link-label={this.linkLabel}\n data-location={courseEnrollmentLink}\n onClick={(e) => this.handleCardClick(e, realisationProperty)}\n //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n ></hy-content-list-item>\n );\n }\n }\n }\n });\n }\n\n return courseRealisations;\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n const classAlertLabelAttributes = [\n \"hy-content-list--alert-label\",\n `hy-content-list--alert-label--${this.headerstyle}`,\n ].join(\" \");\n\n this.courseRealisations = this.renderItems();\n if (this.courseRealisations && this.courseRealisations.length > 0) {\n return (\n <Host>\n <div class={classAttributes}>{this.courseRealisations}</div>\n </Host>\n );\n } else {\n return (\n <Host>\n <div class={classAttributes}>\n <div class=\"hy-content-list--no-result\">\n <span class={classAlertAttributes}>\n <hy-icon icon={\"hy-icon-info\"} size={16} />\n </span>\n <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n </div>\n </div>\n </Host>\n );\n }\n }\n}\n","hy-content-list-item {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n cursor: pointer;\n display: flex;\n margin-bottom: 16px;\n position: relative;\n //width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 24px;\n }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 21px 0 12px 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 16px;\n }\n}\nhy-content-list-item.grid {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-right: var(--gutter-medium);\n max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n padding: 21px 0 60px 12px;\n width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n }\n @include breakpoint($wide) {\n margin-bottom: 27px;\n margin-right: var(--gutter-wide);\n max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n }\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n margin-right: var(--gutter-extrawide);\n max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n @include breakpoint($narrow) {\n margin-right: 0;\n }\n @include breakpoint($wide) {\n margin-right: var(--gutter-wide);\n }\n @include breakpoint($extrawide) {\n margin-right: var(--gutter-extrawide);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n @include breakpoint($wide) {\n margin-right: 0;\n }\n}\n\n.hy-content-list-item {\n font-family: var(--main-font-family);\n position: relative;\n width: 100%;\n\n a {\n text-decoration: none;\n }\n\n &--container {\n cursor: pointer;\n }\n\n &--item-name {\n color: var(--link-blue);\n @include font-size(20px, 24px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n margin-bottom: 16px;\n word-break: break-word;\n\n &--past-courses {\n color: var(--grayscale-dark);\n }\n }\n\n &--metadata {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n letter-spacing: -0.44px;\n line-height: 16px;\n margin-bottom: 19px;\n padding-bottom: 0;\n\n &--item {\n padding-bottom: 6px;\n }\n\n @include breakpoint($narrow) {\n padding-bottom: 1rem;\n }\n @include breakpoint($extrawide) {\n padding-bottom: 0;\n }\n\n &--item:after {\n content: \"|\";\n padding: 0 8px;\n }\n &--item--last:after {\n content: \" \";\n }\n }\n\n .cancelled {\n span {\n @include font-size(12px, 12px);\n @include font-weight($bold);\n background-color: var(--additional-red-light);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 6px 8px;\n text-transform: uppercase;\n }\n &--past-courses {\n span {\n background-color: var(--grayscale-dark);\n }\n }\n\n &:not(.mobile) {\n display: none;\n }\n\n &.mobile {\n bottom: -50px;\n display: block;\n margin: 0;\n padding-bottom: 12px;\n position: absolute;\n }\n\n @include breakpoint($narrow) {\n margin-right: 8px;\n\n &.mobile {\n display: none;\n }\n &:not(.mobile) {\n display: block;\n }\n }\n }\n\n &--link {\n position: absolute;\n right: -6px;\n\n a {\n align-items: center;\n display: flex;\n flex-direction: row;\n text-decoration: none;\n\n .label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n line-height: 16px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n transform: rotate(-45deg);\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 10.29px;\n }\n }\n }\n }\n }\n}\n\n.hy-content-list-item.row {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n\n @include breakpoint($narrow) {\n bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n @include breakpoint($wide) {\n flex-direction: row;\n padding-right: 200px;\n }\n }\n}\n\n.hy-content-list-item.grid {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n}\n","export interface TagValue {\n name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-content-list-item\",\n styleUrl: \"hy-content-list-item.scss\",\n shadow: false,\n})\nexport class HyContentLstItem {\n @Prop() variant: CourseVariants = CourseVariants.default;\n @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n @Prop() courseCode?: string;\n @Prop() courseName?: string;\n @Prop() isCancelled?: boolean;\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() courseCredits?: string;\n private _courseTags: TagValue[];\n @Prop() courseTags: TagValue[] | string;\n @Prop() courseStartDate?: string;\n @Prop() courseEndDate?: string;\n @Prop() formattedTimeRange?: string;\n @Prop() courseStudyFormat?: string;\n @Prop() courseOrganisation?: string;\n @Prop() courseEnrollmentLink?: string;\n @Prop() courseTeachingLanguage?: string;\n @Prop() courseLinkLabel?: string;\n\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._courseTags = await jsonParserWorker(this.courseTags);\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event) {\n const key = (event as KeyboardEvent).code;\n if (key == keys.enter) {\n let card = this.el;\n window.open(card.dataset.location, \"_blank\", \"noopener\");\n }\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n const target = \"_blank\";\n const ariaLabel = \"Link points outside the current website.\";\n\n const classItemName = [\n \"hy-content-list-item--item-name\",\n `hy-content-list-item--item-name--${this.stateVariant}`,\n ].join(\" \");\n const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n return [\n <div class={classAttributes} tabindex=\"0\">\n <div class={classItemName}>{this.courseName}</div>\n <div class=\"hy-content-list-item--metadata\">\n {this.isCancelled && (\n <div class={classItemCancelled}>\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n <span>{this.formattedTimeRange}</span>\n </div>\n {this.courseOrganisation\n ? [\n <div class=\"hy-content-list-item--metadata--item\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseOrganisation}</span>\n </div>,\n ]\n : [\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n ]}\n </div>\n {this._courseTags && this._courseTags.length > 0 && (\n <div class=\"hy-content-list-item--tags\">\n {this._courseTags.map((x) => {\n return <hy-tag>{x.name}</hy-tag>;\n })}\n </div>\n )}\n {this.isCancelled && (\n <div class=\"cancelled mobile\">\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--link\">\n <a\n href={this.courseEnrollmentLink}\n target={target}\n aria-label={ariaLabel}\n class=\"hy-content-list-item--link--link\"\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.courseLinkLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n </div>\n </span>\n </a>\n </div>\n </div>,\n ];\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-content-list {\n display: flex;\n font-family: var(--main-font-family);\n flex-wrap: wrap;\n\n &--no-result {\n align-items: center;\n display: flex;\n }\n &--alert {\n margin-right: 6px;\n svg {\n fill: var(--grayscale-dark);\n }\n @include breakpoint($xlarge) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n &--large {\n @include breakpoint($overwide) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &--alert-label {\n font-family: var(--main-font-family);\n @include font-size(15px, 22px);\n color: var(--grayscale-dark);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n &--large {\n @include breakpoint($overwide) {\n @include font-size(17px, 26px);\n }\n }\n }\n}\n\n.hy-content-list.row {\n flex-direction: column;\n}\n\n.hy-content-list.grid {\n flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-content-list\",\n styleUrl: \"hy-content-list.scss\",\n shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n @Prop() linkLabel: string = \"Go to course page\";\n @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n @Prop() creditsLabel: string = \"cr\";\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() dataItems: string;\n @Prop() headerstyle: string = \"common\";\n @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n private _dataItems: [];\n private variant: CourseVariants = CourseVariants.default;\n @State() courseRealisations: Array<object> = [];\n @Element() el: HTMLElement;\n /**\n * Data for links to be displayed.\n */\n\n @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.dataWatcher(this.dataItems);\n }\n\n handleCardClick(e, id) {\n e.preventDefault();\n let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n if (card) {\n window.open(card.dataset.location, \"_blank\");\n }\n }\n\n async componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n renderItems() {\n let courseRealisations = [];\n if (this._dataItems && this._dataItems.length > 0) {\n this._dataItems.forEach((item) => {\n const courseObject = JSON.parse(JSON.stringify(item));\n\n const courseListType = courseObject[\"courseListType\"];\n this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n const courseCode = courseObject[\"code\"];\n const courseCredits = courseObject[\"credits\"];\n\n // Course realisations.\n if (courseObject[\"realisations\"]) {\n const realisations = JSON.parse(JSON.stringify(courseObject[\"realisations\"]));\n for (const realisationProperty in realisations) {\n const realizationItem = realisations[realisationProperty];\n const courseRealisationName = realizationItem[\"name\"];\n const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n const courseStudyFormat = realizationItem[\"studyFormat\"];\n const courseCancelled = realizationItem[\"cancelled\"];\n const courseStartDate = realizationItem[\"startDate\"];\n const courseEndDate = realizationItem[\"endDate\"];\n const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n const courseOrganisation = realizationItem[\"organisation\"];\n\n let courseTags = [];\n if (realizationItem[\"tags\"]) {\n let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n for (let z in tags) {\n let tagItem = {name: tags[z]};\n courseTags.push(tagItem);\n }\n }\n const courseTagsJSON = JSON.stringify(courseTags);\n\n const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n courseRealisations.push(\n <hy-content-list-item\n id={realisationProperty}\n class={contentListItemClassAttributes}\n variant={this.variant}\n state-variant={this.courseStateVariant}\n course-code={courseCode}\n course-name={courseRealisationFullName}\n is-cancelled={courseCancelled}\n cancelled-label={this.cancelledLabel}\n course-credits={courseCredits}\n course-tags={courseTagsJSON}\n course-start-date={courseStartDate}\n course-end-date={courseEndDate}\n formatted-time-range={formattedTimeRange}\n course-study-format={courseStudyFormat}\n course-organisation={courseOrganisation}\n course-enrollment-link={courseEnrollmentLink}\n course-teaching-language={courseTeachingLanguage}\n course-link-label={this.linkLabel}\n data-location={courseEnrollmentLink}\n onClick={(e) => this.handleCardClick(e, realisationProperty)}\n //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n ></hy-content-list-item>\n );\n }\n }\n });\n }\n\n return courseRealisations;\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n const classAlertLabelAttributes = [\n \"hy-content-list--alert-label\",\n `hy-content-list--alert-label--${this.headerstyle}`,\n ].join(\" \");\n\n this.courseRealisations = this.renderItems();\n if (this.courseRealisations && this.courseRealisations.length > 0) {\n return (\n <Host>\n <div class={classAttributes}>{this.courseRealisations}</div>\n </Host>\n );\n } else {\n return (\n <Host>\n <div class={classAttributes}>\n <div class=\"hy-content-list--no-result\">\n <span class={classAlertAttributes}>\n <hy-icon icon={\"hy-icon-info\"} size={16} />\n </span>\n <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n </div>\n </div>\n </Host>\n );\n }\n }\n}\n","hy-content-list-item {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n cursor: pointer;\n display: flex;\n margin-bottom: 16px;\n position: relative;\n //width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 24px;\n }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 21px 0 12px 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 16px;\n }\n}\nhy-content-list-item.grid {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-right: var(--gutter-medium);\n max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n padding: 21px 0 60px 12px;\n width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n }\n @include breakpoint($wide) {\n margin-bottom: 27px;\n margin-right: var(--gutter-wide);\n max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n }\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n margin-right: var(--gutter-extrawide);\n max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n @include breakpoint($narrow) {\n margin-right: 0;\n }\n @include breakpoint($wide) {\n margin-right: var(--gutter-wide);\n }\n @include breakpoint($extrawide) {\n margin-right: var(--gutter-extrawide);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n @include breakpoint($wide) {\n margin-right: 0;\n }\n}\n\n.hy-content-list-item {\n font-family: var(--main-font-family);\n position: relative;\n width: 100%;\n\n a {\n text-decoration: none;\n }\n\n &--container {\n cursor: pointer;\n }\n\n &--item-name {\n color: var(--link-blue);\n @include font-size(20px, 24px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n margin-bottom: 16px;\n word-break: break-word;\n\n &--past-courses {\n color: var(--grayscale-dark);\n }\n }\n\n &--metadata {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n letter-spacing: -0.44px;\n line-height: 16px;\n margin-bottom: 19px;\n padding-bottom: 0;\n\n &--item {\n padding-bottom: 6px;\n }\n\n @include breakpoint($narrow) {\n padding-bottom: 1rem;\n }\n @include breakpoint($extrawide) {\n padding-bottom: 0;\n }\n\n &--item:after {\n content: \"|\";\n padding: 0 8px;\n }\n &--item--last:after {\n content: \" \";\n }\n }\n\n .cancelled {\n span {\n @include font-size(12px, 12px);\n @include font-weight($bold);\n background-color: var(--additional-red-light);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 6px 8px;\n text-transform: uppercase;\n }\n &--past-courses {\n span {\n background-color: var(--grayscale-dark);\n }\n }\n\n &:not(.mobile) {\n display: none;\n }\n\n &.mobile {\n bottom: -50px;\n display: block;\n margin: 0;\n padding-bottom: 12px;\n position: absolute;\n }\n\n @include breakpoint($narrow) {\n margin-right: 8px;\n\n &.mobile {\n display: none;\n }\n &:not(.mobile) {\n display: block;\n }\n }\n }\n\n &--link {\n position: absolute;\n right: -6px;\n\n a {\n align-items: center;\n display: flex;\n flex-direction: row;\n text-decoration: none;\n\n .label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n line-height: 16px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n transform: rotate(-45deg);\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 10.29px;\n }\n }\n }\n }\n }\n}\n\n.hy-content-list-item.row {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n\n @include breakpoint($narrow) {\n bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n @include breakpoint($wide) {\n flex-direction: row;\n padding-right: 200px;\n }\n }\n}\n\n.hy-content-list-item.grid {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n}\n","export interface TagValue {\n name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-content-list-item\",\n styleUrl: \"hy-content-list-item.scss\",\n shadow: false,\n})\nexport class HyContentLstItem {\n @Prop() variant: CourseVariants = CourseVariants.default;\n @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n @Prop() courseCode?: string;\n @Prop() courseName?: string;\n @Prop() isCancelled?: boolean;\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() courseCredits?: string;\n private _courseTags: TagValue[];\n @Prop() courseTags: TagValue[] | string;\n @Prop() courseStartDate?: string;\n @Prop() courseEndDate?: string;\n @Prop() formattedTimeRange?: string;\n @Prop() courseStudyFormat?: string;\n @Prop() courseOrganisation?: string;\n @Prop() courseEnrollmentLink?: string;\n @Prop() courseTeachingLanguage?: string;\n @Prop() courseLinkLabel?: string;\n\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._courseTags = await jsonParserWorker(this.courseTags);\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event) {\n const key = (event as KeyboardEvent).code;\n if (key == keys.enter) {\n let card = this.el;\n window.open(card.dataset.location, \"_blank\", \"noopener\");\n }\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n const target = \"_blank\";\n const ariaLabel = \"Link points outside the current website.\";\n\n const classItemName = [\n \"hy-content-list-item--item-name\",\n `hy-content-list-item--item-name--${this.stateVariant}`,\n ].join(\" \");\n const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n return [\n <div class={classAttributes} tabindex=\"0\">\n <div class={classItemName}>{this.courseName}</div>\n <div class=\"hy-content-list-item--metadata\">\n {this.isCancelled && (\n <div class={classItemCancelled}>\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n <span>{this.formattedTimeRange}</span>\n </div>\n {this.courseOrganisation\n ? [\n <div class=\"hy-content-list-item--metadata--item\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseOrganisation}</span>\n </div>,\n ]\n : [\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n ]}\n </div>\n {this._courseTags && this._courseTags.length > 0 && (\n <div class=\"hy-content-list-item--tags\">\n {this._courseTags.map((x) => {\n return <hy-tag>{x.name}</hy-tag>;\n })}\n </div>\n )}\n {this.isCancelled && (\n <div class=\"cancelled mobile\">\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--link\">\n <a\n href={this.courseEnrollmentLink}\n target={target}\n aria-label={ariaLabel}\n class=\"hy-content-list-item--link--link\"\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.courseLinkLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n </div>\n </span>\n </a>\n </div>\n </div>,\n ];\n }\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcenteratunihelsinki/huds-lib",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.72",
|
|
4
4
|
"description": "Helsinki University Design System library",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"pre-commit": "pretty-quick --staged"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "337b5ea8892ca172bc41df49f17239515029b844"
|
|
72
72
|
}
|