@penn-libraries/web 0.3.0-dev.2 → 0.3.0-dev.4

package/dist/components/pennlibs-hero.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsHero extends Components.PennlibsHero, HTMLElement {}
+export const PennlibsHero: {
+    prototype: PennlibsHero;
+    new (): PennlibsHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-hero.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--hero-heading-font:var(--font-serif);--max-width:1080px;--color-typo:var(--color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1em}.hero{position:relative;min-height:var(--hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:3em;padding-bottom:3em}.hero__heading{text-shadow:1px 1px 2px var(--color-fg-default);line-height:1.1;font-size:2.75em;font-weight:bold;font-family:var(--hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--color-typo)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.15em;font-family:var(--font-family);font-weight:500;color:var(--color-typo);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--link-text-underline-offset);text-decoration-thickness:var(--link-text-decoration-thickness);color:var(--color-typo)}.hero__sub-heading a:hover{text-decoration-thickness:var(--link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2em}.hero__sub-heading{font-size:1em}}";
+
+const getCurrentImageSource = (pictureElement) => {
+    const imgElement = pictureElement.querySelector('img');
+    return (imgElement === null || imgElement === void 0 ? void 0 : imgElement.currentSrc) || '';
+};
+const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.heroPictureElement = null;
+        this.heroHeadingElement = null;
+        this.heroParagraphElement = null;
+        this.heroSrc = "";
+        this.lastSrc = "";
+    }
+    componentWillLoad() {
+        const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]');
+        if (heroPictureElement) {
+            this.heroPictureElement = heroPictureElement;
+            this.startWatchingCurrentSrc(heroPictureElement);
+        }
+        const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]');
+        if (heroHeadingElement) {
+            this.heroHeadingElement = heroHeadingElement;
+        }
+        const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]');
+        if (heroParagraphElement) {
+            this.heroParagraphElement = heroParagraphElement;
+        }
+    }
+    startWatchingCurrentSrc(pictureElement) {
+        const checkCurrentSrc = () => {
+            const currentSrc = getCurrentImageSource(pictureElement);
+            if (currentSrc !== this.lastSrc) {
+                this.lastSrc = currentSrc;
+                this.heroSrc = currentSrc;
+            }
+            this.animationFrameId = requestAnimationFrame(checkCurrentSrc);
+        };
+        this.animationFrameId = requestAnimationFrame(checkCurrentSrc);
+    }
+    disconnectedCallback() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    render() {
+        return (h("div", { key: '87c59d996e17ad0de49957658053e61868f91369', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '68e8a1bde0b506c044e0a7d3d63cc5617b52c025', class: "hero__content" }, h("slot", { key: '9a5a94c334922dc17e3d19002f2480d93a1a9612', name: "start" }), h("div", { key: 'abb6ea5015c9810829cde3b8c6a391b2c36298f2', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '81d5b79af5f5ac2e006ebc594d4d9b4ffa1dbb53', class: "viewport-margins" }, h("h1", { key: '1c6672b6228b8d3d2f2d0666644fc9cb199150a0', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '5ffbee19a06e6ecac28aa84549cc8d0bef112cd2', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get hostElement() { return this; }
+    static get style() { return pennlibsHeroCss; }
+}, [1, "pennlibs-hero", {
+        "heroPictureElement": [32],
+        "heroHeadingElement": [32],
+        "heroParagraphElement": [32],
+        "heroSrc": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-hero"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-hero":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Hero);
+            }
+            break;
+    } });
+}
+
+const PennlibsHero = Hero;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsHero, defineCustomElement };
+//# sourceMappingURL=pennlibs-hero.js.map
+
+//# sourceMappingURL=pennlibs-hero.js.map

package/dist/components/pennlibs-hero.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-hero.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n  --hero-height: clamp(42vh, 32rem, 26rem);\n  --hero-heading-font: var(--font-serif);\n  --max-width: 1080px;\n  --color-typo: var(--color-fg-on-emphasis);\n}\n\n*, *:before, *:after {\n  box-sizing: inherit;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.viewport-margins {\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n/* Start of Selection */\n/* Hero section */\n.hero {\n  position: relative;\n  min-height: var(--hero-height);\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: 50% 33%;\n  display: flex;\n}\n/* End of Selection */\n\n.hero::before {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);\n  z-index: 0;\n}\n\n  \n.hero::after {\n  content: \"\";\n  display: flex;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  position: absolute;\n  background: linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);\n  z-index: 0;\n}\n\n.hero__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  z-index: 1;\n}\n\n.hero__heading-container {\n  margin-top: auto;\n  padding-top: 3em;\n  padding-bottom: 3em;\n}\n\n.hero__heading {\n  text-shadow: 1px 1px 2px var(--color-fg-default);\n  line-height: 1.1;\n  font-size: 2.75em;\n  font-weight: bold;\n  font-family: var(--hero-heading-font);\n  text-wrap: pretty;\n  max-width: 30ch;\n  margin: 0;\n  color: var(--color-typo);\n}\n\n@media (max-width: 920px) {\n  .hero__heading {\n    font-size: 2.5em;\n  }\n}\n\n.hero__sub-heading {\n  font-size: 1.15em;\n  font-family: var(--font-family);\n  font-weight: 500;\n  color: var(--color-typo);\n  max-width: 52ch;\n  text-wrap: pretty;\n  margin-top: 1em;\n  margin-bottom: 0;\n}\n\n.hero__sub-heading a {\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-text-decoration-thickness);\n  color: var(--color-typo);\n}\n\n.hero__sub-heading a:hover {\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n  font-weight: bold;\n}\n\n@media (max-width: 620px) {\n  .hero__heading {\n    font-size: 2em;\n  }\n\n  .hero__sub-heading {\n    font-size: 1em;\n  }\n}","import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n  const imgElement = pictureElement.querySelector('img');\n  return imgElement?.currentSrc || '';\n};\n\n@Component({\n  tag: 'pennlibs-hero',\n  styleUrl: 'pennlibs-hero.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Hero {\n  @Element() hostElement: HTMLElement;\n  @State() heroPictureElement: null | HTMLPictureElement = null;\n  @State() heroHeadingElement: null | HTMLHeadingElement = null;\n  @State() heroParagraphElement: null | HTMLParagraphElement = null;\n  @State() heroSrc: string = \"\";\n  private lastSrc: string = \"\";\n  private animationFrameId: number;\n\n  componentWillLoad() {\n    const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]') as HTMLPictureElement;\n    if (heroPictureElement) {\n      this.heroPictureElement = heroPictureElement;\n      this.startWatchingCurrentSrc(heroPictureElement);\n    }\n\n    const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]') as HTMLHeadingElement;\n    if (heroHeadingElement) {\n      this.heroHeadingElement = heroHeadingElement;\n    }\n\n    const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]') as HTMLParagraphElement;\n    if (heroParagraphElement) {\n      this.heroParagraphElement = heroParagraphElement;\n    }\n  }\n\n  private startWatchingCurrentSrc(pictureElement: HTMLPictureElement) {\n    const checkCurrentSrc = () => {\n      const currentSrc = getCurrentImageSource(pictureElement);\n      if (currentSrc !== this.lastSrc) {\n        this.lastSrc = currentSrc;\n        this.heroSrc = currentSrc;\n      }\n      this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n    };\n    \n    this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n  }\n\n  disconnectedCallback() {\n    if (this.animationFrameId) {\n      cancelAnimationFrame(this.animationFrameId);\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"hero\" style={{ backgroundImage: `url(${this.heroSrc})` }}>\n        <div class=\"hero__content\">\n          <slot name=\"start\" />\n          <div class=\"hero__heading-container\">\n            {this.heroHeadingElement && (\n              <div class=\"viewport-margins\">\n                <h1 class=\"hero__heading\" innerHTML={this.heroHeadingElement.innerText} />\n                {this.heroParagraphElement && <p class=\"hero__sub-heading\" innerHTML={this.heroParagraphElement.innerHTML} />}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n}"],"version":3}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,6 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map
+
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map

package/dist/esm/app-globals-DQuL1Twl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-DQuL1Twl.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}