@foblex/m-render 2.9.5 → 3.0.0

package/README.md

@@ -109,7 +109,7 @@ export const routes: Routes = [
 
 ### `ng-component`
 
-Render Angular components with optional height and linked source code:
+Render Angular components or external URLs (via `iframe`) with optional height and linked source code:
 
 ```markdown
 ::: ng-component <component-selector></component-selector> [height]="YOUR EXAMPLE HEIGHT"
@@ -118,6 +118,14 @@ Render Angular components with optional height and linked source code:
 :::
 ```
 
+```markdown
+::: ng-component [url]="https://example.com" [height]="60vh"
+[component.ts] <<< /assets/component.ts
+:::
+```
+
+`ng-component` supports full-screen mode out of the box for both Angular previews and iframe previews.
+
 ### `code-group`
 
 Group multiple code snippets into tabs:

package/assets/styles/_code-view.scss

@@ -28,6 +28,7 @@
   }
 
   .f-code-view, .f-example-view {
+    position: relative;
     background-color: var(--code-view-background);
     border-radius: var(--code-view-border-radius);
     overflow-x: auto;
@@ -56,6 +57,33 @@
       }
     }
 
+    .f-fullscreen-button {
+      position: absolute;
+      top: 8px;
+      right: 20px;
+      border: 1px solid var(--code-view-copy-button-border-color);
+      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      z-index: 3;
+      background-color: var(--code-view-copy-button-background);
+      opacity: 0;
+      cursor: pointer;
+      background-image: var(--fullscreen-icon);
+      background-position: 50%;
+      background-size: 14px;
+      background-repeat: no-repeat;
+      transition: background-color 0.25s, opacity 0.25s;
+
+      &.exit {
+        background-image: var(--fullscreen-exit-icon);
+      }
+
+      &:hover {
+        background-color: var(--code-view-copy-button-hover-background);
+      }
+    }
+
     .f-code-language {
       position: absolute;
       top: 2px;
@@ -78,6 +106,14 @@
       .f-code-language {
         opacity: 0;
       }
+
+      .f-fullscreen-button {
+        opacity: 1;
+
+        &:active {
+          opacity: 0.1;
+        }
+      }
     }
   }
 
@@ -85,5 +121,25 @@
     width: 100%;
     height: 300px;
     overflow: hidden;
+
+    &.f-example-view-fullscreen {
+      border-radius: 0;
+    }
+
+    .f-example-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    &.f-example-view-fullscreen .f-fullscreen-button {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: none) {
+    .f-example-view .f-fullscreen-button {
+      opacity: 1;
+    }
   }
 }

package/assets/styles/_icons.scss

@@ -1,5 +1,7 @@
 :root {
   --copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
+  --fullscreen-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
+  --fullscreen-exit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3C/svg%3E");
 }
 
 .f-icon {

package/fesm2022/{foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs → foblex-m-render-cookie-popup-DzpgC1SS.mjs}

@@ -3,7 +3,7 @@ import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@a
 import { LOCAL_STORAGE, GTagService } from './foblex-m-render.mjs';
 
 const F_ACCEPT_COOKIES_KEY = 'm-accepts-cookies';
-class CookiePopupComponent {
+class CookiePopup {
     _localStorage = inject(LOCAL_STORAGE);
     _gtag = inject(GTagService, { optional: true });
     _consentValue = signal(null, ...(ngDevMode ? [{ debugName: "_consentValue" }] : []));
@@ -27,13 +27,13 @@ class CookiePopupComponent {
         this._gtag?.updateConsent(true);
         this._consentValue.set('true');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CookiePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: CookiePopupComponent, isStandalone: true, selector: "cookie-popup", ngImport: i0, template: "@if (showPopup()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CookiePopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CookiePopup, isStandalone: true, selector: "cookie-popup", ngImport: i0, template: "@if (showPopup()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: CookiePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CookiePopup, decorators: [{
             type: Component,
             args: [{ selector: 'cookie-popup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showPopup()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n", styles: [":host{position:fixed;bottom:16px;right:16px;z-index:99999;opacity:0;visibility:hidden;animation:1s linear forwards .5s fadeIn}.docs-cookies-popup{padding:1rem;background-color:var(--background-color);border:1px solid var(--divider-color);color:var(--primary-text);border-radius:var(--border-radius);font-size:14px;max-width:310px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;box-shadow:var(--shadow-3)}.docs-cookies-popup>div{display:flex;gap:8px;align-items:center;width:100%;margin-block-start:1rem}.f-button{outline:none;border:none;height:unset;line-height:26px;font-size:14px;font-weight:500;border-radius:var(--border-radius)}@keyframes fadeIn{to{opacity:100%;visibility:visible}}\n"] }]
         }], ctorParameters: () => [] });
 
-export { CookiePopupComponent, F_ACCEPT_COOKIES_KEY };
-//# sourceMappingURL=foblex-m-render-cookie-popup.component-Cx-ELX3C.mjs.map
+export { CookiePopup, F_ACCEPT_COOKIES_KEY };
+//# sourceMappingURL=foblex-m-render-cookie-popup-DzpgC1SS.mjs.map

package/fesm2022/foblex-m-render-cookie-popup-DzpgC1SS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"foblex-m-render-cookie-popup-DzpgC1SS.mjs","sources":["../../../../libs/m-render/src/lib/analytics/cookie-popup/cookie-popup.ts","../../../../libs/m-render/src/lib/analytics/cookie-popup/cookie-popup.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';\nimport { GTagService } from '../g-tag.service';\nimport { LOCAL_STORAGE } from '../../common';\n\nexport const F_ACCEPT_COOKIES_KEY = 'm-accepts-cookies';\n\n@Component({\n  selector: 'cookie-popup',\n  standalone: true,\n  templateUrl: './cookie-popup.html',\n  styleUrls: ['./cookie-popup.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CookiePopup {\n  private readonly _localStorage = inject(LOCAL_STORAGE);\n  private readonly _gtag = inject(GTagService, { optional: true });\n\n  private readonly _consentValue = signal<string | null>(null);\n\n  protected readonly showPopup = computed(() =>\n    this._gtag !== null &&\n    this._consentValue() !== 'true' &&\n    this._consentValue() !== 'false',\n  );\n\n  constructor() {\n    try {\n      const value = this._localStorage?.getItem(F_ACCEPT_COOKIES_KEY);\n      this._consentValue.set(value);\n    } catch {\n      this._consentValue.set(null);\n    }\n  }\n\n  protected accept(): void {\n    try {\n      this._localStorage?.setItem(F_ACCEPT_COOKIES_KEY, 'true');\n    } catch { /* empty */ }\n\n    this._gtag?.updateConsent(true);\n    this._consentValue.set('true');\n  }\n}\n\n","@if (showPopup()) {\n  <div class=\"docs-cookies-popup docs-invert-mode\">\n    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>\n\n    <div>\n      <a href=\"https://policies.google.com/technologies/cookies\" target=\"_blank\" rel=\"noopener\">\n        <button class=\"f-button\" [attr.text]=\"'Learn more'\" aria-label=\"Learn More\">\n          Learn more\n        </button>\n      </a>\n      <button\n        (click)=\"accept()\"\n        class=\"f-button\"\n        [attr.text]=\"'Ok, Got it'\"\n        aria-label=\"Ok, Got it\">\n        Ok, Got it\n      </button>\n    </div>\n  </div>\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,oBAAoB,GAAG;MASvB,WAAW,CAAA;AACL,IAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;IACrC,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/C,IAAA,aAAa,GAAG,MAAM,CAAgB,IAAI,yDAAC;IAEzC,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,KAAK,KAAK,IAAI;AACnB,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,MAAM;AAC/B,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,OAAO,qDACjC;AAED,IAAA,WAAA,GAAA;AACE,QAAA,IAAI;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,oBAAoB,CAAC;AAC/D,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B;AAAE,QAAA,MAAM;AACN,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;QAC9B;IACF;IAEU,MAAM,GAAA;AACd,QAAA,IAAI;YACF,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC;QAC3D;AAAE,QAAA,MAAM,cAAc;AAEtB,QAAA,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC;IAChC;uGA5BW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,wECbxB,ooBAoBA,EAAA,MAAA,EAAA,CAAA,+sBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDPa,WAAW,EAAA,UAAA,EAAA,CAAA;kBAPvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ooBAAA,EAAA,MAAA,EAAA,CAAA,+sBAAA,CAAA,EAAA;;;;;"}