1 line
No EOL
17 KiB
JSON
1 line
No EOL
17 KiB
JSON
{"ast":null,"code":"import * as i0 from \"@angular/core\";\nimport * as i1 from \"../../projects/ngx-pinch-zoom/src/lib/pinch-zoom.component\";\nexport let AppComponent = /*#__PURE__*/(() => {\n class AppComponent {\n constructor() {\n this.title = 'ivypinchApp';\n }\n\n }\n\n AppComponent.ɵfac = function AppComponent_Factory(t) {\n return new (t || AppComponent)();\n };\n\n AppComponent.ɵcmp = /*@__PURE__*/i0.ɵɵdefineComponent({\n type: AppComponent,\n selectors: [[\"app-root\"]],\n decls: 147,\n vars: 19,\n consts: [[1, \"wrapper\"], [1, \"demo\"], [3, \"transition-duration\"], [\"src\", \"https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80\"], [3, \"limit-zoom\"], [3, \"minScale\"], [3, \"auto-zoom-out\"], [3, \"double-tap\"], [3, \"double-tap-scale\"], [3, \"disabled\"], [3, \"disablePan\"], [3, \"minPanScale\"], [3, \"overflow\"], [3, \"disableZoomControl\"], [3, \"zoomControlScale\"], [3, \"backgroundColor\"], [3, \"limitPan\"], [3, \"listeners\"], [3, \"wheel\"], [3, \"wheelZoomFactor\"], [3, \"autoHeight\"], [\"src\", \"https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80\", \"width\", \"752\", \"height\", \"500\"], [3, \"draggableImage\"], [\"myPinch\", \"pinchZoom\"], [1, \"actions\"], [1, \"btn\", \"btn-small\", \"btn-outline\", \"btn-rounded\", 3, \"click\"]],\n template: function AppComponent_Template(rf, ctx) {\n if (rf & 1) {\n const _r1 = i0.ɵɵgetCurrentView();\n\n i0.ɵɵelementStart(0, \"div\", 0);\n i0.ɵɵelementStart(1, \"h1\");\n i0.ɵɵtext(2, \"Properties\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(3, \"div\", 1);\n i0.ɵɵelementStart(4, \"h2\");\n i0.ɵɵtext(5, \"transition-duration: 1000\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(6, \"p\");\n i0.ɵɵtext(7, \"Defines the speed of the animation of positioning and transforming.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(8, \"pinch-zoom\", 2);\n i0.ɵɵelement(9, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(10, \"div\", 1);\n i0.ɵɵelementStart(11, \"h2\");\n i0.ɵɵtext(12, \"limit-zoom: 2\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(13, \"p\");\n i0.ɵɵtext(14, \"Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(15, \"pinch-zoom\", 4);\n i0.ɵɵelement(16, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(17, \"div\", 1);\n i0.ɵɵelementStart(18, \"h2\");\n i0.ɵɵtext(19, \"minScale: 1\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(20, \"p\");\n i0.ɵɵtext(21, \"Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(22, \"pinch-zoom\", 5);\n i0.ɵɵelement(23, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(24, \"div\", 1);\n i0.ɵɵelementStart(25, \"h2\");\n i0.ɵɵtext(26, \"auto-zoom-out: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(27, \"p\");\n i0.ɵɵtext(28, \"Automatic restoration of the original size of an image after its zooming in by two fingers.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(29, \"pinch-zoom\", 6);\n i0.ɵɵelement(30, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(31, \"div\", 1);\n i0.ɵɵelementStart(32, \"h2\");\n i0.ɵɵtext(33, \"double-tap: false\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(34, \"p\");\n i0.ɵɵtext(35, \"Zooming in and zooming out of an image, depending on its current condition, with double tap.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(36, \"pinch-zoom\", 7);\n i0.ɵɵelement(37, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(38, \"div\", 1);\n i0.ɵɵelementStart(39, \"h2\");\n i0.ɵɵtext(40, \"double-tap-scale: 4\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(41, \"p\");\n i0.ɵɵtext(42, \"Double tap scaling factor.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(43, \"pinch-zoom\", 8);\n i0.ɵɵelement(44, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(45, \"div\", 1);\n i0.ɵɵelementStart(46, \"h2\");\n i0.ɵɵtext(47, \"disabled: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(48, \"pinch-zoom\", 9);\n i0.ɵɵelement(49, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(50, \"div\", 1);\n i0.ɵɵelementStart(51, \"h2\");\n i0.ɵɵtext(52, \"disablePan: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(53, \"p\");\n i0.ɵɵtext(54, \"Turn off panning with one finger.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(55, \"pinch-zoom\", 10);\n i0.ɵɵelement(56, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(57, \"div\", 1);\n i0.ɵɵelementStart(58, \"h2\");\n i0.ɵɵtext(59, \"minPanScale: 2\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(60, \"p\");\n i0.ɵɵtext(61, \"Minimum zoom at which panning is enabled.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(62, \"pinch-zoom\", 11);\n i0.ɵɵelement(63, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(64, \"div\", 1);\n i0.ɵɵelementStart(65, \"h2\");\n i0.ɵɵtext(66, \"overflow: 'visible'\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(67, \"p\");\n i0.ɵɵtext(68, \"hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(69, \"pinch-zoom\", 12);\n i0.ɵɵelement(70, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(71, \"div\", 1);\n i0.ɵɵelementStart(72, \"h2\");\n i0.ɵɵtext(73, \"disableZoomControl: 'disable'\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(74, \"p\");\n i0.ɵɵtext(75, \"Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(76, \"pinch-zoom\", 13);\n i0.ɵɵelement(77, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(78, \"div\", 1);\n i0.ɵɵelementStart(79, \"h2\");\n i0.ɵɵtext(80, \"zoomControlScale: 2\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(81, \"p\");\n i0.ɵɵtext(82, \"Zoom factor when using zoom controls.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(83, \"pinch-zoom\", 14);\n i0.ɵɵelement(84, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(85, \"div\", 1);\n i0.ɵɵelementStart(86, \"h2\");\n i0.ɵɵtext(87, \"backgroundColor: 'rgba(0,0,0,0.65)'\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(88, \"p\");\n i0.ɵɵtext(89, \"The background color of the container.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(90, \"pinch-zoom\", 15);\n i0.ɵɵelement(91, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(92, \"div\", 1);\n i0.ɵɵelementStart(93, \"h2\");\n i0.ɵɵtext(94, \"limitPan: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(95, \"p\");\n i0.ɵɵtext(96, \"Stop panning when the edge of the image reaches the edge of the screen.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(97, \"pinch-zoom\", 16);\n i0.ɵɵelement(98, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(99, \"div\", 1);\n i0.ɵɵelementStart(100, \"h2\");\n i0.ɵɵtext(101, \"listeners: 'auto'\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(102, \"p\");\n i0.ɵɵtext(103, \"By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(104, \"pinch-zoom\", 17);\n i0.ɵɵelement(105, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(106, \"div\", 1);\n i0.ɵɵelementStart(107, \"h2\");\n i0.ɵɵtext(108, \"wheel: false\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(109, \"p\");\n i0.ɵɵtext(110, \"Scale with the mouse wheel.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(111, \"pinch-zoom\", 18);\n i0.ɵɵelement(112, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(113, \"div\", 1);\n i0.ɵɵelementStart(114, \"h2\");\n i0.ɵɵtext(115, \"wheelZoomFactor: 0.5\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(116, \"p\");\n i0.ɵɵtext(117, \"Zoom factor when zoomed in with the mouse wheel.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(118, \"pinch-zoom\", 19);\n i0.ɵɵelement(119, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(120, \"div\", 1);\n i0.ɵɵelementStart(121, \"h2\");\n i0.ɵɵtext(122, \"autoHeight: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(123, \"p\");\n i0.ɵɵtext(124, \"Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the \");\n i0.ɵɵelement(125, \"img\");\n i0.ɵɵtext(126, \" tag. When setting the property value to `true`, a subscription to the window resize listener will be created.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(127, \"pinch-zoom\", 20);\n i0.ɵɵelement(128, \"img\", 21);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(129, \"div\", 1);\n i0.ɵɵelementStart(130, \"h2\");\n i0.ɵɵtext(131, \"draggableImage: true\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(132, \"p\");\n i0.ɵɵtext(133, \"Sets the attribute draggable to the img tag.\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(134, \"pinch-zoom\", 22);\n i0.ɵɵelement(135, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(136, \"h1\");\n i0.ɵɵtext(137, \"Methods\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(138, \"div\", 1);\n i0.ɵɵelementStart(139, \"pinch-zoom\", null, 23);\n i0.ɵɵelement(141, \"img\", 3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(142, \"div\", 24);\n i0.ɵɵelementStart(143, \"button\", 25);\n i0.ɵɵlistener(\"click\", function AppComponent_Template_button_click_143_listener() {\n i0.ɵɵrestoreView(_r1);\n\n const _r0 = i0.ɵɵreference(140);\n\n return _r0.toggleZoom();\n });\n i0.ɵɵtext(144, \"toggleZoom()\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(145, \"button\", 25);\n i0.ɵɵlistener(\"click\", function AppComponent_Template_button_click_145_listener() {\n i0.ɵɵrestoreView(_r1);\n\n const _r0 = i0.ɵɵreference(140);\n\n return _r0.destroy();\n });\n i0.ɵɵtext(146, \"destroy()\");\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n i0.ɵɵelementEnd();\n }\n\n if (rf & 2) {\n i0.ɵɵadvance(8);\n i0.ɵɵproperty(\"transition-duration\", 1000);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"limit-zoom\", 2);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"minScale\", 1);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"auto-zoom-out\", true);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"double-tap\", false);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"double-tap-scale\", 4);\n i0.ɵɵadvance(5);\n i0.ɵɵproperty(\"disabled\", true);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"disablePan\", true);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"minPanScale\", 2);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"overflow\", \"visible\");\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"disableZoomControl\", \"disable\");\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"zoomControlScale\", 2);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"backgroundColor\", \"rgba(0,0,0,0.65)\");\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"limitPan\", true);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"listeners\", \"auto\");\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"wheel\", false);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"wheelZoomFactor\", 0.5);\n i0.ɵɵadvance(9);\n i0.ɵɵproperty(\"autoHeight\", true);\n i0.ɵɵadvance(7);\n i0.ɵɵproperty(\"draggableImage\", true);\n }\n },\n directives: [i1.PinchZoomComponent],\n styles: [\".wrapper[_ngcontent-%COMP%]{max-width:500px;margin:0 auto;font-family:system-ui}.demo[_ngcontent-%COMP%]{margin-bottom:60px}.actions[_ngcontent-%COMP%]{padding-top:20px}h1[_ngcontent-%COMP%]{font-size:30px}h2[_ngcontent-%COMP%]{font-size:20px}.btn[_ngcontent-%COMP%]{display:inline-block;min-width:190px;line-height:56px;font-weight:500;border-radius:6px;text-align:center;margin:0 15px 15px 0;background:none;transition:all .2s;color:#00000a;outline:none;font-size:15px;letter-spacing:1px;text-transform:uppercase;font-weight:600;background:#fff}.btn[_ngcontent-%COMP%]:hover{color:#000000bf;text-decoration:none;cursor:pointer;box-shadow:0 3px 10px #00000026}.btn[_ngcontent-%COMP%]:active{position:relative;top:2px}.btn-small[_ngcontent-%COMP%]{line-height:32px;font-weight:400;padding:0 8px;font-size:14px;letter-spacing:0px;min-width:auto;text-transform:none}.btn-outline[_ngcontent-%COMP%]{border:1px solid #999}.btn-outline[_ngcontent-%COMP%]:hover{border-color:#000000bf}.btn-rounded[_ngcontent-%COMP%]{border-radius:100px}.btn[disabled][_ngcontent-%COMP%]{cursor:default;box-shadow:none}.btn-light[_ngcontent-%COMP%]{color:#fff}.btn-light[_ngcontent-%COMP%]:hover{color:#ffffffbf}.btn-light.btn-outline[_ngcontent-%COMP%]{border:1px solid #fff}.btn-light.btn-outline[_ngcontent-%COMP%]:hover{border-color:#ffffffbf}.btn-green[_ngcontent-%COMP%]{background:#7cae7a;color:#fff;border:none}.btn-green.btn-outline[_ngcontent-%COMP%]{border:1px solid #7cae7a;color:#7cae7a;background:none}.btn-green.btn-clear[_ngcontent-%COMP%]{color:#7cae7a}.btn-green[_ngcontent-%COMP%]:hover{background:#709a6e;color:#fff}.btn-green.btn-outline[_ngcontent-%COMP%]:hover{background:none;border-color:#709a6e;color:#709a6e}.btn-green.btn-clear[_ngcontent-%COMP%]:hover{color:#709a6e}.btn-green[disabled][_ngcontent-%COMP%]{background:#aaa}.btn-green.btn-outline[disabled][_ngcontent-%COMP%]{background:none;border-color:#aaa;color:#aaa}.btn-blue[_ngcontent-%COMP%]{background:#0366d6;color:#fff;border:none}.btn-blue.btn-outline[_ngcontent-%COMP%]{border:1px solid #0366d6;color:#0366d6;background:none}.btn-blue.btn-clear[_ngcontent-%COMP%]{color:#0366d6;background:none}.btn-blue[_ngcontent-%COMP%]:hover{background:#035cbf;color:#fff}.btn-blue.btn-outline[_ngcontent-%COMP%]:hover{background:none;border-color:#035cbf;color:#035cbf}.btn-blue.btn-clear[_ngcontent-%COMP%]:hover{color:#035cbf}.btn-clear[_ngcontent-%COMP%]{background:none;border:none}.btn-clear[_ngcontent-%COMP%]:hover{background:none}\"]\n });\n return AppComponent;\n})();","map":null,"metadata":{},"sourceType":"module"} |