npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.66 → 0.8.67 - Mend

@itcenteratunihelsinki/huds-lib 0.8.66 → 0.8.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/huds-lib/hy-person-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["hyPersonCardCss","HyPersonCard","PersonCardVariants","default","componentDidLoad","this","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","document","body","disconnectedCallback","disconnect","size","isMobile","componentWillRender","_fullName","firstName","lastName","_initials","imageUrl","charAt","imageAlt","scLabel","render","classLinkAttributes","variant","join","classIsActive","url","length","concat","classAttributes","classPositionTitle","target","isExternal","h","class","categoryTitle","href","loading","disableLazy","src","alt","positionTitle","department","extended","field","email","icon","phone","aboutInfo","aboutInfoLabel"],"sources":["./src/components/hy-person-card/hy-person-card.scss?tag=hy-person-card","./src/components/hy-person-card/hy-person-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-person-card-container {\n font-family: var(--main-font-family);\n margin-bottom: 28px;\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__category-title {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 18px); //>1920 desktop\n }\n }\n\n &__link {\n text-decoration: none;\n\n &.inactive {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n.hy-person-card {\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n\n &__image-container {\n margin-right: 12px;\n max-width: 70px;\n\n @include breakpoint($narrow) {\n margin-right: 16px;\n max-width: 112px;\n }\n\n @include breakpoint($fullhd) {\n max-width: 140px;\n }\n\n &__image {\n height: 70px;\n width: 70px;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n //1920\n height: 140px;\n width: 140px;\n }\n img {\n height: 70px;\n width: 70px;\n object-fit: cover;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n }\n }\n &__no-image {\n height: 70px;\n width: 70px;\n\n align-items: center;\n background-color: var(--brand-main-light);\n display: flex;\n justify-content: center;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n\n &__initials {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 32px);\n letter-spacing: 0.96px;\n }\n }\n }\n }\n\n &__info-container {\n &__full-name {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 4px;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(26px, 28px);\n letter-spacing: -0.81px;\n margin-bottom: 5px;\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n }\n }\n\n &__position-title {\n @include font-size(14px, 19px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n margin-bottom: 4px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin-bottom: 8px;\n }\n\n &__search-panel {\n @include font-weight($regular);\n }\n }\n\n &__department {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__field {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__email-container {\n align-items: center;\n display: flex;\n margin-bottom: 4px;\n }\n &__email {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 15px;\n width: 16px;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 16px;\n }\n }\n }\n }\n\n &__phone-container {\n align-items: center;\n display: flex;\n }\n &__phone {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 13px;\n width: 13px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n }\n }\n }\n }\n\n &.search-panel {\n margin-bottom: 12px;\n\n @include breakpoint($narrow) {\n margin-bottom: 14px;\n }\n\n .hy-person-card__info-container__full-name {\n @include font-size(14px, 20px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 0;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(16px, 24px);\n letter-spacing: 0;\n }\n }\n\n .hy-person-card__info-container__position-title {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-bottom: 0;\n }\n\n .hy-person-card__image-container {\n margin-right: 12px;\n\n &__image {\n height: 60px;\n width: 60px;\n img {\n height: 60px;\n width: 60px;\n }\n }\n &__no-image {\n height: 60px;\n width: 60px;\n\n &__initials {\n color: var(--grayscale-white);\n @include font-size(16px, 32px);\n @include font-weight($bold);\n letter-spacing: 0.48px;\n }\n }\n }\n }\n}\n\n.hy-person-card__extended-info-container {\n display: block;\n padding-top: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 12px;\n }\n\n &__about {\n @include font-size(12px, 17px);\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 16px);\n }\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n\n .label {\n @include font-weight($bold);\n padding-right: 3px;\n }\n }\n}\n","import {Component, h, Prop, State} from \"@stencil/core\";\nimport {PersonCardVariants} from \"../../utils/utils\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n@Component({\n tag: \"hy-person-card\",\n styleUrl: \"hy-person-card.scss\",\n shadow: false,\n})\nexport class HyPersonCard {\n @Prop() variant: PersonCardVariants = PersonCardVariants.default;\n @Prop() categoryTitle?: string;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() firstName?: string;\n @Prop() lastName?: string;\n @Prop() url: string = null;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() positionTitle?: string;\n @Prop() department: string = null;\n @Prop() field: string = null;\n @Prop() email: string = null;\n @Prop() phone: string = null;\n @Prop() aboutInfo: string = null;\n @Prop() researchNetworks?: string;\n @Prop() studyProgramme?: string;\n @Prop() aboutInfoLabel?: string;\n @Prop() researchNetworksLabel?: string;\n @Prop() studyProgrammeLabel?: string;\n\n private _fullName: string;\n private _initials: string;\n\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n componentWillRender() {\n this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : \"\";\n this._initials =\n this.imageUrl && this.firstName && this.lastName ? \"\" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;\n if (!this.imageAlt) {\n this.imageAlt = this._fullName;\n }\n if (!this.scLabel) {\n this.scLabel = \"Link to the person profile\";\n }\n }\n\n render() {\n let classLinkAttributes = [\"hy-person-card-container__link\", this.variant].join(\" \");\n let classIsActive = this.url && this.url.length > 0 ? \"\" : \" inactive\";\n classLinkAttributes = classLinkAttributes.concat(classIsActive);\n\n const classAttributes = [\"hy-person-card\", this.variant].join(\" \");\n const classPositionTitle = [\n \"hy-person-card__info-container__position-title\",\n `hy-person-card__info-container__position-title__${this.variant}`,\n ].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <article class=\"hy-person-card-container\">\n <div class={classLinkAttributes}>\n {this.categoryTitle && this.variant == PersonCardVariants.default && (\n <div class=\"hy-person-card-container__category-title\">{this.categoryTitle}</div>\n )}\n <div class={classAttributes}>\n <div class=\"hy-person-card__image-container\">\n {this.imageUrl ? (\n <a class=\"hy-person-card__image-container__image\" href={this.url} target={target}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </a>\n ) : (\n <div class=\"hy-person-card__image-container__no-image\">\n <div class=\"hy-person-card__image-container__no-image__initials\" aria-hidden=\"true\">\n {this._initials}\n </div>\n </div>\n )}\n </div>\n <div class=\"hy-person-card__info-container\">\n <a class=\"hy-person-card__info-container__full-name\" href={this.url} target={target}>\n {this._fullName}\n </a>\n {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}\n {this.department &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__field\">{this.field}</div>\n )}\n {this.email &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n </div>\n </div>\n {this.variant == PersonCardVariants.extended && (\n <div class=\"hy-person-card hy-person-card__extended-info-container\">\n {this.department && this.isMobile && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field && this.isMobile && <div class=\"hy-person-card__info-container__field\">{this.field}</div>}\n {this.email &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n {this.aboutInfo && (\n <div class=\"hy-person-card__extended-info-container__about\">\n <span class=\"label\">{this.aboutInfoLabel}:</span>\n <span>{this.aboutInfo}</span>\n </div>\n )}\n </div>\n )}\n </div>\n </article>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["hyPersonCardCss","HyPersonCard","PersonCardVariants","default","componentDidLoad","this","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","document","body","disconnectedCallback","disconnect","size","isMobile","componentWillRender","_fullName","firstName","lastName","_initials","imageUrl","charAt","imageAlt","scLabel","render","classLinkAttributes","variant","join","classIsActive","url","length","concat","classAttributes","classPositionTitle","target","isExternal","h","class","categoryTitle","href","loading","disableLazy","src","alt","positionTitle","department","extended","field","email","icon","phone","aboutInfo","aboutInfoLabel"],"sources":["./src/components/hy-person-card/hy-person-card.scss?tag=hy-person-card","./src/components/hy-person-card/hy-person-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-person-card-container {\n font-family: var(--main-font-family);\n margin-bottom: 28px;\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__category-title {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 18px); //>1920 desktop\n }\n }\n\n &__link {\n text-decoration: none;\n\n &.inactive {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n.hy-person-card {\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n\n &__image-container {\n margin-right: 12px;\n max-width: 70px;\n\n @include breakpoint($narrow) {\n margin-right: 16px;\n max-width: 112px;\n }\n\n @include breakpoint($fullhd) {\n max-width: 140px;\n }\n\n &__image {\n height: 70px;\n width: 70px;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n //1920\n height: 140px;\n width: 140px;\n }\n img {\n height: 70px;\n width: 70px;\n object-fit: cover;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n }\n }\n &__no-image {\n height: 70px;\n width: 70px;\n\n align-items: center;\n background-color: var(--brand-main-light);\n display: flex;\n justify-content: center;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n\n &__initials {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 32px);\n letter-spacing: 0.96px;\n }\n }\n }\n }\n\n &__info-container {\n &__full-name {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 4px;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(26px, 28px);\n letter-spacing: -0.81px;\n margin-bottom: 5px;\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n }\n }\n\n &__position-title {\n @include font-size(14px, 19px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n margin-bottom: 4px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin-bottom: 8px;\n }\n\n &__search-panel {\n @include font-weight($regular);\n }\n }\n\n &__department {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__field {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__email-container {\n align-items: center;\n display: flex;\n margin-bottom: 4px;\n }\n &__email {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 15px;\n width: 16px;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 16px;\n }\n }\n }\n }\n\n &__phone-container {\n align-items: center;\n display: flex;\n }\n &__phone {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 13px;\n width: 13px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n }\n }\n }\n }\n\n &.search-panel {\n margin-bottom: 12px;\n\n @include breakpoint($narrow) {\n margin-bottom: 14px;\n }\n\n .hy-person-card__info-container__full-name {\n @include font-size(14px, 20px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 0;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(16px, 24px);\n letter-spacing: 0;\n }\n }\n\n .hy-person-card__info-container__position-title {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-bottom: 0;\n }\n\n .hy-person-card__image-container {\n margin-right: 12px;\n\n &__image {\n height: 60px;\n width: 60px;\n img {\n height: 60px;\n width: 60px;\n }\n }\n &__no-image {\n height: 60px;\n width: 60px;\n\n &__initials {\n color: var(--grayscale-white);\n @include font-size(16px, 32px);\n @include font-weight($bold);\n letter-spacing: 0.48px;\n }\n }\n }\n }\n}\n\n.hy-person-card__extended-info-container {\n display: block;\n padding-top: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 12px;\n }\n\n &__about {\n @include font-size(12px, 17px);\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 16px);\n }\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n\n .label {\n @include font-weight($bold);\n padding-right: 3px;\n }\n }\n}\n","import {Component, h, Prop, State} from \"@stencil/core\";\nimport {PersonCardVariants} from \"../../utils/utils\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n@Component({\n tag: \"hy-person-card\",\n styleUrl: \"hy-person-card.scss\",\n shadow: false,\n})\nexport class HyPersonCard {\n @Prop() variant: PersonCardVariants = PersonCardVariants.default;\n @Prop() categoryTitle?: string;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() firstName?: string;\n @Prop() lastName?: string;\n @Prop() url: string = null;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() positionTitle?: string;\n @Prop() department: string = null;\n @Prop() field: string = null;\n @Prop() email: string = null;\n @Prop() phone: string = null;\n @Prop() aboutInfo: string = null;\n @Prop() researchNetworks?: string;\n @Prop() studyProgramme?: string;\n @Prop() aboutInfoLabel?: string;\n @Prop() researchNetworksLabel?: string;\n @Prop() studyProgrammeLabel?: string;\n\n private _fullName: string;\n private _initials: string;\n\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n componentWillRender() {\n this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : \"\";\n this._initials =\n this.imageUrl && this.firstName && this.lastName ? \"\" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;\n if (!this.imageAlt) {\n this.imageAlt = this._fullName;\n }\n if (!this.scLabel) {\n this.scLabel = \"Link to the person profile\";\n }\n }\n\n render() {\n let classLinkAttributes = [\"hy-person-card-container__link\", this.variant].join(\" \");\n let classIsActive = this.url && this.url.length > 0 ? \"\" : \" inactive\";\n classLinkAttributes = classLinkAttributes.concat(classIsActive);\n\n const classAttributes = [\"hy-person-card\", this.variant].join(\" \");\n const classPositionTitle = [\n \"hy-person-card__info-container__position-title\",\n `hy-person-card__info-container__position-title__${this.variant}`,\n ].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <article class=\"hy-person-card-container\">\n <div class={classLinkAttributes}>\n {this.categoryTitle && this.variant == PersonCardVariants.default && (\n <div class=\"hy-person-card-container__category-title\">{this.categoryTitle}</div>\n )}\n <div class={classAttributes}>\n <div class=\"hy-person-card__image-container\">\n {this.imageUrl ? (\n <a class=\"hy-person-card__image-container__image\" href={this.url} target={target}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </a>\n ) : (\n <div class=\"hy-person-card__image-container__no-image\">\n <div class=\"hy-person-card__image-container__no-image__initials\" aria-hidden=\"true\">\n {this._initials}\n </div>\n </div>\n )}\n </div>\n <div class=\"hy-person-card__info-container\">\n <a class=\"hy-person-card__info-container__full-name\" href={this.url} target={target}>\n {this._fullName}\n </a>\n {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}\n {this.department &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__field\">{this.field}</div>\n )}\n {this.email &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n </div>\n </div>\n {this.variant == PersonCardVariants.extended && (\n <div class=\"hy-person-card hy-person-card__extended-info-container\">\n {this.department && this.isMobile && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field && this.isMobile && <div class=\"hy-person-card__info-container__field\">{this.field}</div>}\n {this.email &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n {this.aboutInfo && (\n <div class=\"hy-person-card__extended-info-container__about\">\n <span class=\"label\">{this.aboutInfoLabel}:</span>\n <span>{this.aboutInfo}</span>\n </div>\n )}\n </div>\n )}\n </div>\n </article>\n );\n }\n}\n"],"mappings":"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"}

package/dist/types/components/hy-search-field/hy-search-field.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 export declare class HySearchField {
   el: HTMLElement;
   label: string;
+  ariaLabel: string;
+  resetLabel: string;
   isLabelBold: boolean;
   labelLarge: boolean;
   isLuomusSearch: boolean;

package/dist/types/components.d.ts CHANGED Viewed

@@ -758,6 +758,7 @@ export namespace Components {
         "margin": number;
     }
     interface HySearchField {
+        "ariaLabel": string;
         "inputId": string;
         "isLabelBold": boolean;
         "isLabelHidden"?: boolean;
@@ -766,6 +767,7 @@ export namespace Components {
         "labelLarge": boolean;
         "placeholder": string;
         "prefillParameter": string;
+        "resetLabel": string;
     }
     interface HySectionContainer {
     }
@@ -2242,6 +2244,7 @@ declare namespace LocalJSX {
         "margin"?: number;
     }
     interface HySearchField {
+        "ariaLabel"?: string;
         "inputId"?: string;
         "isLabelBold"?: boolean;
         "isLabelHidden"?: boolean;
@@ -2250,6 +2253,7 @@ declare namespace LocalJSX {
         "labelLarge"?: boolean;
         "placeholder"?: string;
         "prefillParameter"?: string;
+        "resetLabel"?: string;
     }
     interface HySectionContainer {
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.66",
+  "version": "0.8.67",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "010cb09335088901f9b548d1c8b50552c084a051"
+  "gitHead": "db972edc5f0a87a82c0bc917be0873e2dc073bc5"
 }