@bitstack/ng-boundary 14.0.5 → 14.0.6-alpha.0

package/esm2020/lib/bs-boundary.mjs

@@ -47,10 +47,12 @@ export class BsBoundary {
     }
 }
 BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, host: { properties: { "class.landscape": "isLandscape" } }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
+            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], host: {
+                        '[class.landscape]': 'isLandscape'
+                    }, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
         }], propDecorators: { isFixedCenter: [{
                 type: Input
             }], pointerEventsNone: [{
@@ -62,4 +64,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], orientationChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvYml0c3RhY2stbmctYm91bmRhcnkvc3JjL2xpYi90ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyxPQUFPLEVBQUUsU0FBUyxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLCtCQUErQixDQUFDOztBQVN2RSxNQUFNLE9BQU8sVUFBVTtJQVB2QjtRQVNhLGtCQUFhLEdBQWEsS0FBSyxDQUFDO1FBQ2hDLHNCQUFpQixHQUFhLEtBQUssQ0FBQztRQUNwQyxvQkFBZSxHQUFzQixNQUFNLENBQUM7UUFHM0Msc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUVsRCx1QkFBa0IsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNoRCxvQkFBZSxHQUFHLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBQ25ELGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0tBdUMxQztJQXJDRyxJQUFJLFdBQVc7UUFDWCxPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDakQsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQ7O09BRUc7SUFDSCx1QkFBdUI7UUFDbkIsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLFdBQVcsRUFBRTtZQUN0QyxJQUFJLENBQUMsZUFBZSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2xDLE9BQU87U0FDVjtRQUVELElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxVQUFVLEVBQUU7WUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDM0MsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuQyxPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsa0JBQWtCO2FBQ2xCLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQzthQUNuQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ2hELENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs7dUdBakRRLFVBQVU7MkZBQVYsVUFBVSxxUUFGUixDQUFDLHdCQUF3QixDQUFDLDBCQ2xCekMsNk9BU0E7MkZEV2EsVUFBVTtrQkFQdEIsU0FBUzsrQkFDSSxhQUFhLGNBRVgsSUFBSSxhQUVMLENBQUMsd0JBQXdCLENBQUM7OEJBSTVCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxpQkFBaUI7c0JBQTFCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgaW5qZWN0LFxuICBJbnB1dCwgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1RPcmllbnRhdGlvbk1vZGV9IGZyb20gJy4vbW9kZWwnO1xuaW1wb3J0IHtCcmVha3BvaW50T2JzZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHtTdWJqZWN0LCB0YWtlVW50aWx9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtCc0JvdW5kYXJ5Q29udGV4dFNlcnZpY2V9IGZyb20gJy4vYnMtYm91bmRhcnktY29udGV4dC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdicy1ib3VuZGFyeScsXG4gICAgdGVtcGxhdGVVcmw6ICd0ZW1wbGF0ZS5odG1sJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHN0eWxlVXJsczogWycuL3N0eWxlcy5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbQnNCb3VuZGFyeUNvbnRleHRTZXJ2aWNlXSxcbn0pXG5leHBvcnQgY2xhc3MgQnNCb3VuZGFyeSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIEBJbnB1dCgpIGlzRml4ZWRDZW50ZXI/OiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgcG9pbnRlckV2ZW50c05vbmU/OiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgbG9ja09yaWVudGF0aW9uPzogVE9yaWVudGF0aW9uTW9kZSA9ICdhdXRvJztcbiAgICBASW5wdXQoKSBmb3J3YXJkU3R5bGU/OiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuXG4gICAgQE91dHB1dCgpIG9yaWVudGF0aW9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgcHJpdmF0ZSBicmVha3BvaW50T2JzZXJ2ZXIgPSBpbmplY3QoQnJlYWtwb2ludE9ic2VydmVyKTtcbiAgICBwcml2YXRlIGJvdW5kYXJ5Q29udGV4dCA9IGluamVjdChCc0JvdW5kYXJ5Q29udGV4dFNlcnZpY2UpO1xuICAgIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgZ2V0IGlzTGFuZHNjYXBlKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5ib3VuZGFyeUNvbnRleHQuZ2V0SXNMYW5kc2NhcGUoKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZXR1cEJyZWFrcG9pbnRPYnNlcnZlcigpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICAgICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIOebo+aOp+aWueWQkeiuiuWMllxuICAgICAqL1xuICAgIHNldHVwQnJlYWtwb2ludE9ic2VydmVyKCkge1xuICAgICAgICBpZiAodGhpcy5sb2NrT3JpZW50YXRpb24gPT09ICdsYW5kc2NhcGUnKSB7XG4gICAgICAgICAgICB0aGlzLmJvdW5kYXJ5Q29udGV4dC5zZXRJc0xhbmRzY2FwZSh0cnVlKTtcbiAgICAgICAgICAgIHRoaXMub3JpZW50YXRpb25DaGFuZ2UuZW1pdCh0cnVlKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLmxvY2tPcmllbnRhdGlvbiA9PT0gJ3BvcnRyYWl0Jykge1xuICAgICAgICAgICAgdGhpcy5ib3VuZGFyeUNvbnRleHQuc2V0SXNMYW5kc2NhcGUoZmFsc2UpO1xuICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KGZhbHNlKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyXG4gICAgICAgICAgICAub2JzZXJ2ZSgnKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpJylcbiAgICAgICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmJvdW5kYXJ5Q29udGV4dC5zZXRJc0xhbmRzY2FwZShyZXN1bHQubWF0Y2hlcyk7XG4gICAgICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KHJlc3VsdC5tYXRjaGVzKTtcbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJib3VuZGFyeS13cmFwcGVyXCJcbiAgW2NsYXNzLmZpeGVkLWNlbnRlcl09XCJpc0ZpeGVkQ2VudGVyXCJcbiAgW2NsYXNzLmxhbmRzY2FwZV09XCJpc0xhbmRzY2FwZVwiXG4gIFtjbGFzcy5wb2ludGVyRXZlbnRzTm9uZV09XCJwb2ludGVyRXZlbnRzTm9uZVwiXG4gIFtzdHlsZV09XCJmb3J3YXJkU3R5bGVcIlxuPlxuICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvYml0c3RhY2stbmctYm91bmRhcnkvc3JjL2xpYi90ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyxPQUFPLEVBQUUsU0FBUyxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLCtCQUErQixDQUFDOztBQVl2RSxNQUFNLE9BQU8sVUFBVTtJQVZ2QjtRQVlhLGtCQUFhLEdBQWEsS0FBSyxDQUFDO1FBQ2hDLHNCQUFpQixHQUFhLEtBQUssQ0FBQztRQUNwQyxvQkFBZSxHQUFzQixNQUFNLENBQUM7UUFHM0Msc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUVsRCx1QkFBa0IsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNoRCxvQkFBZSxHQUFHLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBQ25ELGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0tBdUMxQztJQXJDRyxJQUFJLFdBQVc7UUFDWCxPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDakQsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQ7O09BRUc7SUFDSCx1QkFBdUI7UUFDbkIsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLFdBQVcsRUFBRTtZQUN0QyxJQUFJLENBQUMsZUFBZSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2xDLE9BQU87U0FDVjtRQUVELElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxVQUFVLEVBQUU7WUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDM0MsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuQyxPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsa0JBQWtCO2FBQ2xCLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQzthQUNuQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ2hELENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs7dUdBakRRLFVBQVU7MkZBQVYsVUFBVSxpVUFMUixDQUFDLHdCQUF3QixDQUFDLDBCQ2xCekMsd01BUUE7MkZEZWEsVUFBVTtrQkFWdEIsU0FBUzsrQkFDSSxhQUFhLGNBRVgsSUFBSSxhQUVMLENBQUMsd0JBQXdCLENBQUMsUUFDL0I7d0JBQ0YsbUJBQW1CLEVBQUUsYUFBYTtxQkFDckM7OEJBSVEsYUFBYTtzQkFBckIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVJLGlCQUFpQjtzQkFBMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBpbmplY3QsXG4gIElucHV0LCBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VE9yaWVudGF0aW9uTW9kZX0gZnJvbSAnLi9tb2RlbCc7XG5pbXBvcnQge0JyZWFrcG9pbnRPYnNlcnZlcn0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5pbXBvcnQge1N1YmplY3QsIHRha2VVbnRpbH0gZnJvbSAncnhqcyc7XG5pbXBvcnQge0JzQm91bmRhcnlDb250ZXh0U2VydmljZX0gZnJvbSAnLi9icy1ib3VuZGFyeS1jb250ZXh0LnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2JzLWJvdW5kYXJ5JyxcbiAgICB0ZW1wbGF0ZVVybDogJ3RlbXBsYXRlLmh0bWwnLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3R5bGVzLnNjc3MnXSxcbiAgICBwcm92aWRlcnM6IFtCc0JvdW5kYXJ5Q29udGV4dFNlcnZpY2VdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzcy5sYW5kc2NhcGVdJzogJ2lzTGFuZHNjYXBlJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgQnNCb3VuZGFyeSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIEBJbnB1dCgpIGlzRml4ZWRDZW50ZXI/OiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgcG9pbnRlckV2ZW50c05vbmU/OiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgbG9ja09yaWVudGF0aW9uPzogVE9yaWVudGF0aW9uTW9kZSA9ICdhdXRvJztcbiAgICBASW5wdXQoKSBmb3J3YXJkU3R5bGU/OiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuXG4gICAgQE91dHB1dCgpIG9yaWVudGF0aW9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgcHJpdmF0ZSBicmVha3BvaW50T2JzZXJ2ZXIgPSBpbmplY3QoQnJlYWtwb2ludE9ic2VydmVyKTtcbiAgICBwcml2YXRlIGJvdW5kYXJ5Q29udGV4dCA9IGluamVjdChCc0JvdW5kYXJ5Q29udGV4dFNlcnZpY2UpO1xuICAgIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgZ2V0IGlzTGFuZHNjYXBlKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5ib3VuZGFyeUNvbnRleHQuZ2V0SXNMYW5kc2NhcGUoKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZXR1cEJyZWFrcG9pbnRPYnNlcnZlcigpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICAgICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIOebo+aOp+aWueWQkeiuiuWMllxuICAgICAqL1xuICAgIHNldHVwQnJlYWtwb2ludE9ic2VydmVyKCkge1xuICAgICAgICBpZiAodGhpcy5sb2NrT3JpZW50YXRpb24gPT09ICdsYW5kc2NhcGUnKSB7XG4gICAgICAgICAgICB0aGlzLmJvdW5kYXJ5Q29udGV4dC5zZXRJc0xhbmRzY2FwZSh0cnVlKTtcbiAgICAgICAgICAgIHRoaXMub3JpZW50YXRpb25DaGFuZ2UuZW1pdCh0cnVlKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLmxvY2tPcmllbnRhdGlvbiA9PT0gJ3BvcnRyYWl0Jykge1xuICAgICAgICAgICAgdGhpcy5ib3VuZGFyeUNvbnRleHQuc2V0SXNMYW5kc2NhcGUoZmFsc2UpO1xuICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KGZhbHNlKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyXG4gICAgICAgICAgICAub2JzZXJ2ZSgnKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpJylcbiAgICAgICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmJvdW5kYXJ5Q29udGV4dC5zZXRJc0xhbmRzY2FwZShyZXN1bHQubWF0Y2hlcyk7XG4gICAgICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KHJlc3VsdC5tYXRjaGVzKTtcbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJib3VuZGFyeS13cmFwcGVyXCJcbiAgW2NsYXNzLmZpeGVkLWNlbnRlcl09XCJpc0ZpeGVkQ2VudGVyXCJcbiAgW2NsYXNzLnBvaW50ZXJFdmVudHNOb25lXT1cInBvaW50ZXJFdmVudHNOb25lXCJcbiAgW3N0eWxlXT1cImZvcndhcmRTdHlsZVwiXG4+XG4gICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==

package/esm2020/public-api.mjs

@@ -3,5 +3,4 @@
  */
 export * from './lib/bs-boundary';
 export * from './lib/bs-boundary-context.service';
-export * from './lib/utils';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2JpdHN0YWNrLW5nLWJvdW5kYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsYUFBYSxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBAYml0c3RhY2svbmctYm91bmRhcnlcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeS1jb250ZXh0LnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdXRpbHMnXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2JpdHN0YWNrLW5nLWJvdW5kYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1DQUFtQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBAYml0c3RhY2svbmctYm91bmRhcnlcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeS1jb250ZXh0LnNlcnZpY2UnO1xuIl19

package/fesm2015/bitstack-ng-boundary.mjs

@@ -65,10 +65,12 @@ class BsBoundary {
     }
 }
 BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, host: { properties: { "class.landscape": "isLandscape" } }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
+            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], host: {
+                        '[class.landscape]': 'isLandscape'
+                    }, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
         }], propDecorators: { isFixedCenter: [{
                 type: Input
             }], pointerEventsNone: [{
@@ -81,40 +83,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-/**
- * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
- * @param content - HTML 內容
- * @returns 已轉換 px 的修改後 HTML 內容
- */
-function convertPxToCalc(content) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(content, 'text/html');
-    // 找到所有帶有 style 屬性的元素
-    const elementsWithStyle = doc.querySelectorAll('[style]');
-    elementsWithStyle.forEach(element => {
-        const htmlElement = element;
-        const styleAttr = htmlElement.getAttribute('style');
-        if (styleAttr) {
-            // 將 style 屬性中的所有 px 值轉換為 calc()
-            const convertedStyle = convertStylePxToCalc(styleAttr);
-            htmlElement.setAttribute('style', convertedStyle);
-        }
-    });
-    return doc.body.innerHTML;
-}
-/**
- * 將 style 字串中的 px 值轉換為 calc() 表達式
- * @param styleString - 原始 style 字串
- * @returns 已轉換的 style 字串
- */
-function convertStylePxToCalc(styleString) {
-    // 正則表達式匹配 CSS 屬性值中的 px 單位
-    // 匹配格式: 數字(可包含小數和負號) + px
-    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
-        return `calc(${value} * var(--px2vw-ratio))`;
-    });
-}
-
 /*
  * Public API Surface of @bitstack/ng-boundary
  */
@@ -123,5 +91,5 @@ function convertStylePxToCalc(styleString) {
  * Generated bundle index. Do not edit.
  */
 
-export { BsBoundary, BsBoundaryContextService, convertPxToCalc, convertStylePxToCalc };
+export { BsBoundary, BsBoundaryContextService };
 //# sourceMappingURL=bitstack-ng-boundary.mjs.map

package/fesm2015/bitstack-ng-boundary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/lib/utils.ts","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n  private _isLandscape = new BehaviorSubject<boolean>(false);\n\n  readonly isLandscape$ = this._isLandscape.asObservable();\n\n  setIsLandscape(value: boolean): void {\n    this._isLandscape.next(value);\n  }\n\n  getIsLandscape(): boolean {\n    return this._isLandscape.value;\n  }\n}\n","import {\n  Component,\n  EventEmitter,\n  inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport {TOrientationMode} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\n\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: 'template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n})\nexport class BsBoundary implements OnInit, OnDestroy {\n\n    @Input() isFixedCenter?: boolean = false;\n    @Input() pointerEventsNone?: boolean = false;\n    @Input() lockOrientation?: TOrientationMode = 'auto';\n    @Input() forwardStyle?: Record<string, string>;\n\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.lockOrientation === 'landscape') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/**\n * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))\n * @param content - HTML 內容\n * @returns 已轉換 px 的修改後 HTML 內容\n */\nexport function convertPxToCalc(content: string): string {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(content, 'text/html');\n\n  // 找到所有帶有 style 屬性的元素\n  const elementsWithStyle = doc.querySelectorAll('[style]');\n\n  elementsWithStyle.forEach(element => {\n    const htmlElement = element as HTMLElement;\n    const styleAttr = htmlElement.getAttribute('style');\n\n    if (styleAttr) {\n      // 將 style 屬性中的所有 px 值轉換為 calc()\n      const convertedStyle = convertStylePxToCalc(styleAttr);\n      htmlElement.setAttribute('style', convertedStyle);\n    }\n  });\n\n  return doc.body.innerHTML;\n}\n\n\n/**\n * 將 style 字串中的 px 值轉換為 calc() 表達式\n * @param styleString - 原始 style 字串\n * @returns 已轉換的 style 字串\n */\nexport function convertStylePxToCalc(styleString: string): string {\n  // 正則表達式匹配 CSS 屬性值中的 px 單位\n  // 匹配格式: 數字(可包含小數和負號) + px\n  return styleString.replace(/(-?\\d+(?:\\.\\d+)?)px/g, (match, value) => {\n    return `calc(${value} * var(--px2vw-ratio))`;\n  });\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\nexport * from './lib/utils'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n  private _isLandscape = new BehaviorSubject<boolean>(false);\n\n  readonly isLandscape$ = this._isLandscape.asObservable();\n\n  setIsLandscape(value: boolean): void {\n    this._isLandscape.next(value);\n  }\n\n  getIsLandscape(): boolean {\n    return this._isLandscape.value;\n  }\n}\n","import {\n  Component,\n  EventEmitter,\n  inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport {TOrientationMode} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\n\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: 'template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n    host: {\n        '[class.landscape]': 'isLandscape'\n    }\n})\nexport class BsBoundary implements OnInit, OnDestroy {\n\n    @Input() isFixedCenter?: boolean = false;\n    @Input() pointerEventsNone?: boolean = false;\n    @Input() lockOrientation?: TOrientationMode = 'auto';\n    @Input() forwardStyle?: Record<string, string>;\n\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.lockOrientation === 'landscape') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/bitstack-ng-boundary.mjs

@@ -65,10 +65,12 @@ class BsBoundary {
     }
 }
 BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, host: { properties: { "class.landscape": "isLandscape" } }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--boundary-width: min(var(--vw100), var(--boundary-max-width));--boundary-height: min(var(--vh100), var(--boundary-max-height));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}.boundary-wrapper.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width)}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
+            args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], host: {
+                        '[class.landscape]': 'isLandscape'
+                    }, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}.boundary-wrapper{--active-ratio: var(--landscape-ratio);--active-inv-ratio: var(--portrait-ratio);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio));--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width));--design-base-width: var(--design-width);--design-base-height: var(--design-height)}@media (min-aspect-ratio: 16/9){.boundary-wrapper{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.boundary-wrapper.landscape{--active-ratio: var(--portrait-ratio);--active-inv-ratio: var(--landscape-ratio);--design-base-width: var(--design-height);--design-base-height: var(--design-width);--boundary-width: var(--vw100);--boundary-height: calc(var(--boundary-width) * var(--active-inv-ratio))}@media (min-aspect-ratio: 9/16){.boundary-wrapper.landscape{--boundary-height: var(--vh100);--boundary-width: calc(var(--boundary-height) * var(--active-ratio))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
         }], propDecorators: { isFixedCenter: [{
                 type: Input
             }], pointerEventsNone: [{
@@ -81,40 +83,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-/**
- * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
- * @param content - HTML 內容
- * @returns 已轉換 px 的修改後 HTML 內容
- */
-function convertPxToCalc(content) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(content, 'text/html');
-    // 找到所有帶有 style 屬性的元素
-    const elementsWithStyle = doc.querySelectorAll('[style]');
-    elementsWithStyle.forEach(element => {
-        const htmlElement = element;
-        const styleAttr = htmlElement.getAttribute('style');
-        if (styleAttr) {
-            // 將 style 屬性中的所有 px 值轉換為 calc()
-            const convertedStyle = convertStylePxToCalc(styleAttr);
-            htmlElement.setAttribute('style', convertedStyle);
-        }
-    });
-    return doc.body.innerHTML;
-}
-/**
- * 將 style 字串中的 px 值轉換為 calc() 表達式
- * @param styleString - 原始 style 字串
- * @returns 已轉換的 style 字串
- */
-function convertStylePxToCalc(styleString) {
-    // 正則表達式匹配 CSS 屬性值中的 px 單位
-    // 匹配格式: 數字(可包含小數和負號) + px
-    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
-        return `calc(${value} * var(--px2vw-ratio))`;
-    });
-}
-
 /*
  * Public API Surface of @bitstack/ng-boundary
  */
@@ -123,5 +91,5 @@ function convertStylePxToCalc(styleString) {
  * Generated bundle index. Do not edit.
  */
 
-export { BsBoundary, BsBoundaryContextService, convertPxToCalc, convertStylePxToCalc };
+export { BsBoundary, BsBoundaryContextService };
 //# sourceMappingURL=bitstack-ng-boundary.mjs.map

package/fesm2020/bitstack-ng-boundary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/lib/utils.ts","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n  private _isLandscape = new BehaviorSubject<boolean>(false);\n\n  readonly isLandscape$ = this._isLandscape.asObservable();\n\n  setIsLandscape(value: boolean): void {\n    this._isLandscape.next(value);\n  }\n\n  getIsLandscape(): boolean {\n    return this._isLandscape.value;\n  }\n}\n","import {\n  Component,\n  EventEmitter,\n  inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport {TOrientationMode} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\n\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: 'template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n})\nexport class BsBoundary implements OnInit, OnDestroy {\n\n    @Input() isFixedCenter?: boolean = false;\n    @Input() pointerEventsNone?: boolean = false;\n    @Input() lockOrientation?: TOrientationMode = 'auto';\n    @Input() forwardStyle?: Record<string, string>;\n\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.lockOrientation === 'landscape') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/**\n * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))\n * @param content - HTML 內容\n * @returns 已轉換 px 的修改後 HTML 內容\n */\nexport function convertPxToCalc(content: string): string {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(content, 'text/html');\n\n  // 找到所有帶有 style 屬性的元素\n  const elementsWithStyle = doc.querySelectorAll('[style]');\n\n  elementsWithStyle.forEach(element => {\n    const htmlElement = element as HTMLElement;\n    const styleAttr = htmlElement.getAttribute('style');\n\n    if (styleAttr) {\n      // 將 style 屬性中的所有 px 值轉換為 calc()\n      const convertedStyle = convertStylePxToCalc(styleAttr);\n      htmlElement.setAttribute('style', convertedStyle);\n    }\n  });\n\n  return doc.body.innerHTML;\n}\n\n\n/**\n * 將 style 字串中的 px 值轉換為 calc() 表達式\n * @param styleString - 原始 style 字串\n * @returns 已轉換的 style 字串\n */\nexport function convertStylePxToCalc(styleString: string): string {\n  // 正則表達式匹配 CSS 屬性值中的 px 單位\n  // 匹配格式: 數字(可包含小數和負號) + px\n  return styleString.replace(/(-?\\d+(?:\\.\\d+)?)px/g, (match, value) => {\n    return `calc(${value} * var(--px2vw-ratio))`;\n  });\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\nexport * from './lib/utils'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n  private _isLandscape = new BehaviorSubject<boolean>(false);\n\n  readonly isLandscape$ = this._isLandscape.asObservable();\n\n  setIsLandscape(value: boolean): void {\n    this._isLandscape.next(value);\n  }\n\n  getIsLandscape(): boolean {\n    return this._isLandscape.value;\n  }\n}\n","import {\n  Component,\n  EventEmitter,\n  inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport {TOrientationMode} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\n\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: 'template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n    host: {\n        '[class.landscape]': 'isLandscape'\n    }\n})\nexport class BsBoundary implements OnInit, OnDestroy {\n\n    @Input() isFixedCenter?: boolean = false;\n    @Input() pointerEventsNone?: boolean = false;\n    @Input() lockOrientation?: TOrientationMode = 'auto';\n    @Input() forwardStyle?: Record<string, string>;\n\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.lockOrientation === 'landscape') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitstack/ng-boundary",
-  "version": "14.0.5",
+  "version": "14.0.6-alpha.0",
   "peerDependencies": {
     "@angular/common": ">=14 <16",
     "@angular/core": ">=14 <16",

package/public-api.d.ts

@@ -1,3 +1,2 @@
 export * from './lib/bs-boundary';
 export * from './lib/bs-boundary-context.service';
-export * from './lib/utils';

package/esm2020/lib/utils.mjs

@@ -1,34 +0,0 @@
-/**
- * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
- * @param content - HTML 內容
- * @returns 已轉換 px 的修改後 HTML 內容
- */
-export function convertPxToCalc(content) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(content, 'text/html');
-    // 找到所有帶有 style 屬性的元素
-    const elementsWithStyle = doc.querySelectorAll('[style]');
-    elementsWithStyle.forEach(element => {
-        const htmlElement = element;
-        const styleAttr = htmlElement.getAttribute('style');
-        if (styleAttr) {
-            // 將 style 屬性中的所有 px 值轉換為 calc()
-            const convertedStyle = convertStylePxToCalc(styleAttr);
-            htmlElement.setAttribute('style', convertedStyle);
-        }
-    });
-    return doc.body.innerHTML;
-}
-/**
- * 將 style 字串中的 px 值轉換為 calc() 表達式
- * @param styleString - 原始 style 字串
- * @returns 已轉換的 style 字串
- */
-export function convertStylePxToCalc(styleString) {
-    // 正則表達式匹配 CSS 屬性值中的 px 單位
-    // 匹配格式: 數字(可包含小數和負號) + px
-    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
-        return `calc(${value} * var(--px2vw-ratio))`;
-    });
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFDSCxNQUFNLFVBQVUsZUFBZSxDQUFDLE9BQWU7SUFDN0MsTUFBTSxNQUFNLEdBQUcsSUFBSSxTQUFTLEVBQUUsQ0FBQztJQUMvQixNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUMsQ0FBQztJQUV6RCxxQkFBcUI7SUFDckIsTUFBTSxpQkFBaUIsR0FBRyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFFMUQsaUJBQWlCLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1FBQ2xDLE1BQU0sV0FBVyxHQUFHLE9BQXNCLENBQUM7UUFDM0MsTUFBTSxTQUFTLEdBQUcsV0FBVyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVwRCxJQUFJLFNBQVMsRUFBRTtZQUNiLGdDQUFnQztZQUNoQyxNQUFNLGNBQWMsR0FBRyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN2RCxXQUFXLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxjQUFjLENBQUMsQ0FBQztTQUNuRDtJQUNILENBQUMsQ0FBQyxDQUFDO0lBRUgsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztBQUM1QixDQUFDO0FBR0Q7Ozs7R0FJRztBQUNILE1BQU0sVUFBVSxvQkFBb0IsQ0FBQyxXQUFtQjtJQUN0RCwwQkFBMEI7SUFDMUIsMEJBQTBCO0lBQzFCLE9BQU8sV0FBVyxDQUFDLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRTtRQUNsRSxPQUFPLFFBQVEsS0FBSyx3QkFBd0IsQ0FBQztJQUMvQyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIOWwhyBIVE1MIOWFp+WuueS4reaJgOaciSBpbmxpbmUgc3R5bGUg55qEIHB4IOWAvOi9ieaPm+eCuiBjYWxjKHB4ICogdmFyKC0tcHgydnctcmF0aW8pKVxuICogQHBhcmFtIGNvbnRlbnQgLSBIVE1MIOWFp+WuuVxuICogQHJldHVybnMg5bey6L2J5o+bIHB4IOeahOS/ruaUueW+jCBIVE1MIOWFp+WuuVxuICovXG5leHBvcnQgZnVuY3Rpb24gY29udmVydFB4VG9DYWxjKGNvbnRlbnQ6IHN0cmluZyk6IHN0cmluZyB7XG4gIGNvbnN0IHBhcnNlciA9IG5ldyBET01QYXJzZXIoKTtcbiAgY29uc3QgZG9jID0gcGFyc2VyLnBhcnNlRnJvbVN0cmluZyhjb250ZW50LCAndGV4dC9odG1sJyk7XG5cbiAgLy8g5om+5Yiw5omA5pyJ5bi25pyJIHN0eWxlIOWxrOaAp+eahOWFg+e0oFxuICBjb25zdCBlbGVtZW50c1dpdGhTdHlsZSA9IGRvYy5xdWVyeVNlbGVjdG9yQWxsKCdbc3R5bGVdJyk7XG5cbiAgZWxlbWVudHNXaXRoU3R5bGUuZm9yRWFjaChlbGVtZW50ID0+IHtcbiAgICBjb25zdCBodG1sRWxlbWVudCA9IGVsZW1lbnQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3Qgc3R5bGVBdHRyID0gaHRtbEVsZW1lbnQuZ2V0QXR0cmlidXRlKCdzdHlsZScpO1xuXG4gICAgaWYgKHN0eWxlQXR0cikge1xuICAgICAgLy8g5bCHIHN0eWxlIOWxrOaAp+S4reeahOaJgOaciSBweCDlgLzovYnmj5vngrogY2FsYygpXG4gICAgICBjb25zdCBjb252ZXJ0ZWRTdHlsZSA9IGNvbnZlcnRTdHlsZVB4VG9DYWxjKHN0eWxlQXR0cik7XG4gICAgICBodG1sRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ3N0eWxlJywgY29udmVydGVkU3R5bGUpO1xuICAgIH1cbiAgfSk7XG5cbiAgcmV0dXJuIGRvYy5ib2R5LmlubmVySFRNTDtcbn1cblxuXG4vKipcbiAqIOWwhyBzdHlsZSDlrZfkuLLkuK3nmoQgcHgg5YC86L2J5o+b54K6IGNhbGMoKSDooajpgZTlvI9cbiAqIEBwYXJhbSBzdHlsZVN0cmluZyAtIOWOn+WniyBzdHlsZSDlrZfkuLJcbiAqIEByZXR1cm5zIOW3sui9ieaPm+eahCBzdHlsZSDlrZfkuLJcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGNvbnZlcnRTdHlsZVB4VG9DYWxjKHN0eWxlU3RyaW5nOiBzdHJpbmcpOiBzdHJpbmcge1xuICAvLyDmraPliYfooajpgZTlvI/ljLnphY0gQ1NTIOWxrOaAp+WAvOS4reeahCBweCDllq7kvY1cbiAgLy8g5Yy56YWN5qC85byPOiDmlbjlrZco5Y+v5YyF5ZCr5bCP5pW45ZKM6LKg6JmfKSArIHB4XG4gIHJldHVybiBzdHlsZVN0cmluZy5yZXBsYWNlKC8oLT9cXGQrKD86XFwuXFxkKyk/KXB4L2csIChtYXRjaCwgdmFsdWUpID0+IHtcbiAgICByZXR1cm4gYGNhbGMoJHt2YWx1ZX0gKiB2YXIoLS1weDJ2dy1yYXRpbykpYDtcbiAgfSk7XG59XG4iXX0=

package/lib/utils.d.ts

@@ -1,12 +0,0 @@
-/**
- * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
- * @param content - HTML 內容
- * @returns 已轉換 px 的修改後 HTML 內容
- */
-export declare function convertPxToCalc(content: string): string;
-/**
- * 將 style 字串中的 px 值轉換為 calc() 表達式
- * @param styleString - 原始 style 字串
- * @returns 已轉換的 style 字串
- */
-export declare function convertStylePxToCalc(styleString: string): string;