@gravity-ui/page-constructor 5.27.1-alpha.0 → 5.27.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/cjs/blocks/SliderNew/Slider.css +14 -6
  2. package/build/cjs/components/FullscreenImage/FullscreenImage.css +51 -16
  3. package/build/cjs/components/FullscreenImage/FullscreenImage.js +2 -2
  4. package/build/esm/blocks/SliderNew/Slider.css +14 -6
  5. package/build/esm/components/FullscreenImage/FullscreenImage.css +51 -16
  6. package/build/esm/components/FullscreenImage/FullscreenImage.js +2 -2
  7. package/package.json +1 -1
  8. package/widget/index.js +1 -1
package/build/cjs/blocks/SliderNew/Slider.css CHANGED
@@ -721,7 +721,7 @@ unpredictable css rules order in build */
721
721
  padding: 0;
722
722
  }
723
723
  @media (max-width: 577px) {
724
- .pc-SliderNewBlock_type_media-card:not(.pc-SliderNewBlock_one-slide) {
724
+ .pc-SliderNewBlock_type_media-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
725
725
  margin-left: 0;
726
726
  padding-left: 0;
727
727
  width: 100%;
@@ -755,6 +755,14 @@ unpredictable css rules order in build */
755
755
  .pc-SliderNewBlock_type_header-card {
756
756
  padding-top: 0;
757
757
  }
758
+ @media (max-width: 577px) {
759
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
760
+ margin-left: 0;
761
+ padding-left: 0;
762
+ width: 100%;
763
+ overflow: inherit;
764
+ }
765
+ }
758
766
  .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__wrapper {
759
767
  position: relative;
760
768
  }
@@ -798,7 +806,7 @@ unpredictable css rules order in build */
798
806
  padding: 0;
799
807
  }
800
808
  @media (max-width: 769px) {
801
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) {
809
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
802
810
  margin-left: -8px;
803
811
  padding-left: 0;
804
812
  width: calc(100% + 8px);
@@ -808,13 +816,13 @@ unpredictable css rules order in build */
808
816
  .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow {
809
817
  display: none;
810
818
  }
811
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
819
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
812
820
  margin-left: 0;
813
821
  }
814
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
822
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
815
823
  padding-left: 0;
816
824
  }
817
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
825
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
818
826
  padding-right: 0;
819
827
  padding-left: 0;
820
828
  }
@@ -823,7 +831,7 @@ unpredictable css rules order in build */
823
831
  padding-top: 0;
824
832
  }
825
833
  @media (max-width: 577px) {
826
- .pc-SliderNewBlock_type_fullscreen-card:not(.pc-SliderNewBlock_one-slide) {
834
+ .pc-SliderNewBlock_type_fullscreen-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
827
835
  margin-left: 0;
828
836
  padding-left: 0;
829
837
  width: 100%;
package/build/cjs/components/FullscreenImage/FullscreenImage.css CHANGED
@@ -6,7 +6,7 @@ unpredictable css rules order in build */
6
6
  .pc-fullscreen-image__image-wrapper {
7
7
  position: relative;
8
8
  }
9
- .pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
9
+ .pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__expand-icon-wrapper {
10
10
  opacity: 1;
11
11
  }
12
12
  .pc-fullscreen-image__modal-content {
@@ -29,7 +29,7 @@ unpredictable css rules order in build */
29
29
  .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
30
30
  background-color: transparent;
31
31
  }
32
- .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__icon-wrapper {
32
+ .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__expand-icon-wrapper, .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__close-icon-wrapper {
33
33
  opacity: 1;
34
34
  }
35
35
  .pc-fullscreen-image__modal-image {
@@ -62,7 +62,7 @@ unpredictable css rules order in build */
62
62
  .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
63
63
  border-radius: var(--pc-border-radius);
64
64
  }
65
- .pc-fullscreen-image__icon-wrapper {
65
+ .pc-fullscreen-image__expand-icon-wrapper {
66
66
  display: inline-block;
67
67
  margin: 0;
68
68
  padding: 0;
@@ -75,10 +75,7 @@ unpredictable css rules order in build */
75
75
  display: flex;
76
76
  align-items: center;
77
77
  justify-content: center;
78
- position: absolute;
79
78
  z-index: 1001;
80
- right: 16px;
81
- top: 16px;
82
79
  width: 36px;
83
80
  height: 36px;
84
81
  border-radius: 8px;
@@ -86,21 +83,65 @@ unpredictable css rules order in build */
86
83
  cursor: pointer;
87
84
  opacity: 0;
88
85
  transition: 0.3s;
86
+ position: absolute;
87
+ right: 16px;
88
+ top: 16px;
89
89
  }
90
- .pc-fullscreen-image__icon-wrapper:focus {
90
+ .pc-fullscreen-image__expand-icon-wrapper:focus {
91
91
  outline: 2px solid var(--g-color-line-focus);
92
92
  outline-offset: 0;
93
93
  }
94
- .pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
94
+ .pc-fullscreen-image__expand-icon-wrapper:focus:not(:focus-visible) {
95
95
  outline: 0;
96
96
  }
97
- .pc-fullscreen-image__icon-wrapper:focus {
97
+ .pc-fullscreen-image__expand-icon-wrapper:focus {
98
98
  opacity: 1;
99
99
  }
100
- .pc-fullscreen-image__icon-wrapper_visible {
100
+ @media (max-width: 769px) {
101
+ .pc-fullscreen-image__expand-icon-wrapper {
102
+ opacity: 1;
103
+ }
104
+ }
105
+ .pc-fullscreen-image__close-icon-wrapper {
106
+ display: inline-block;
107
+ margin: 0;
108
+ padding: 0;
109
+ font: inherit;
110
+ border: none;
111
+ outline: none;
112
+ color: inherit;
113
+ background: none;
114
+ cursor: pointer;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ z-index: 1001;
119
+ width: 36px;
120
+ height: 36px;
121
+ border-radius: 8px;
122
+ background-color: var(--g-color-base-simple-hover-solid);
123
+ cursor: pointer;
124
+ opacity: 0;
125
+ transition: 0.3s;
126
+ position: absolute;
101
127
  right: 24px;
102
128
  top: 24px;
103
129
  }
130
+ .pc-fullscreen-image__close-icon-wrapper:focus {
131
+ outline: 2px solid var(--g-color-line-focus);
132
+ outline-offset: 0;
133
+ }
134
+ .pc-fullscreen-image__close-icon-wrapper:focus:not(:focus-visible) {
135
+ outline: 0;
136
+ }
137
+ .pc-fullscreen-image__close-icon-wrapper:focus {
138
+ opacity: 1;
139
+ }
140
+ @media (max-width: 769px) {
141
+ .pc-fullscreen-image__close-icon-wrapper {
142
+ opacity: 1;
143
+ }
144
+ }
104
145
  .pc-fullscreen-image__icon {
105
146
  color: var(--g-color-text-hint);
106
147
  }
@@ -111,10 +152,4 @@ unpredictable css rules order in build */
111
152
  .pc-fullscreen-image__modal-image {
112
153
  width: 100%;
113
154
  }
114
- }
115
- @media (max-width: 769px) {
116
- .pc-fullscreen-image__icon-wrapper {
117
- right: 20px;
118
- top: 50px;
119
- }
120
155
  }
package/build/cjs/components/FullscreenImage/FullscreenImage.js CHANGED
@@ -30,10 +30,10 @@ const FullscreenImage = (props) => {
30
30
  return (react_1.default.createElement("div", Object.assign({ className: b() }, extraProps),
31
31
  react_1.default.createElement("div", { className: b('image-wrapper') },
32
32
  react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
33
- react_1.default.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
33
+ react_1.default.createElement("button", { className: b('expand-icon-wrapper'), onClick: openModal },
34
34
  react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
35
35
  isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }) },
36
- react_1.default.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
36
+ react_1.default.createElement("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
37
37
  react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
38
38
  sliderData ? (react_1.default.createElement("div", { className: b('modal-slider') },
39
39
  react_1.default.createElement(unstable_1.SliderNewBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: models_1.SliderType.FullscreenCard }, sliderData.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('modal-slider_item') },
package/build/esm/blocks/SliderNew/Slider.css CHANGED
@@ -721,7 +721,7 @@ unpredictable css rules order in build */
721
721
  padding: 0;
722
722
  }
723
723
  @media (max-width: 577px) {
724
- .pc-SliderNewBlock_type_media-card:not(.pc-SliderNewBlock_one-slide) {
724
+ .pc-SliderNewBlock_type_media-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
725
725
  margin-left: 0;
726
726
  padding-left: 0;
727
727
  width: 100%;
@@ -755,6 +755,14 @@ unpredictable css rules order in build */
755
755
  .pc-SliderNewBlock_type_header-card {
756
756
  padding-top: 0;
757
757
  }
758
+ @media (max-width: 577px) {
759
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
760
+ margin-left: 0;
761
+ padding-left: 0;
762
+ width: 100%;
763
+ overflow: inherit;
764
+ }
765
+ }
758
766
  .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__wrapper {
759
767
  position: relative;
760
768
  }
@@ -798,7 +806,7 @@ unpredictable css rules order in build */
798
806
  padding: 0;
799
807
  }
800
808
  @media (max-width: 769px) {
801
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) {
809
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
802
810
  margin-left: -8px;
803
811
  padding-left: 0;
804
812
  width: calc(100% + 8px);
@@ -808,13 +816,13 @@ unpredictable css rules order in build */
808
816
  .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow {
809
817
  display: none;
810
818
  }
811
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
819
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
812
820
  margin-left: 0;
813
821
  }
814
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
822
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
815
823
  padding-left: 0;
816
824
  }
817
- .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
825
+ .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
818
826
  padding-right: 0;
819
827
  padding-left: 0;
820
828
  }
@@ -823,7 +831,7 @@ unpredictable css rules order in build */
823
831
  padding-top: 0;
824
832
  }
825
833
  @media (max-width: 577px) {
826
- .pc-SliderNewBlock_type_fullscreen-card:not(.pc-SliderNewBlock_one-slide) {
834
+ .pc-SliderNewBlock_type_fullscreen-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) {
827
835
  margin-left: 0;
828
836
  padding-left: 0;
829
837
  width: 100%;
package/build/esm/components/FullscreenImage/FullscreenImage.css CHANGED
@@ -6,7 +6,7 @@ unpredictable css rules order in build */
6
6
  .pc-fullscreen-image__image-wrapper {
7
7
  position: relative;
8
8
  }
9
- .pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
9
+ .pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__expand-icon-wrapper {
10
10
  opacity: 1;
11
11
  }
12
12
  .pc-fullscreen-image__modal-content {
@@ -29,7 +29,7 @@ unpredictable css rules order in build */
29
29
  .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
30
30
  background-color: transparent;
31
31
  }
32
- .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__icon-wrapper {
32
+ .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__expand-icon-wrapper, .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__close-icon-wrapper {
33
33
  opacity: 1;
34
34
  }
35
35
  .pc-fullscreen-image__modal-image {
@@ -62,7 +62,7 @@ unpredictable css rules order in build */
62
62
  .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
63
63
  border-radius: var(--pc-border-radius);
64
64
  }
65
- .pc-fullscreen-image__icon-wrapper {
65
+ .pc-fullscreen-image__expand-icon-wrapper {
66
66
  display: inline-block;
67
67
  margin: 0;
68
68
  padding: 0;
@@ -75,10 +75,7 @@ unpredictable css rules order in build */
75
75
  display: flex;
76
76
  align-items: center;
77
77
  justify-content: center;
78
- position: absolute;
79
78
  z-index: 1001;
80
- right: 16px;
81
- top: 16px;
82
79
  width: 36px;
83
80
  height: 36px;
84
81
  border-radius: 8px;
@@ -86,21 +83,65 @@ unpredictable css rules order in build */
86
83
  cursor: pointer;
87
84
  opacity: 0;
88
85
  transition: 0.3s;
86
+ position: absolute;
87
+ right: 16px;
88
+ top: 16px;
89
89
  }
90
- .pc-fullscreen-image__icon-wrapper:focus {
90
+ .pc-fullscreen-image__expand-icon-wrapper:focus {
91
91
  outline: 2px solid var(--g-color-line-focus);
92
92
  outline-offset: 0;
93
93
  }
94
- .pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
94
+ .pc-fullscreen-image__expand-icon-wrapper:focus:not(:focus-visible) {
95
95
  outline: 0;
96
96
  }
97
- .pc-fullscreen-image__icon-wrapper:focus {
97
+ .pc-fullscreen-image__expand-icon-wrapper:focus {
98
98
  opacity: 1;
99
99
  }
100
- .pc-fullscreen-image__icon-wrapper_visible {
100
+ @media (max-width: 769px) {
101
+ .pc-fullscreen-image__expand-icon-wrapper {
102
+ opacity: 1;
103
+ }
104
+ }
105
+ .pc-fullscreen-image__close-icon-wrapper {
106
+ display: inline-block;
107
+ margin: 0;
108
+ padding: 0;
109
+ font: inherit;
110
+ border: none;
111
+ outline: none;
112
+ color: inherit;
113
+ background: none;
114
+ cursor: pointer;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ z-index: 1001;
119
+ width: 36px;
120
+ height: 36px;
121
+ border-radius: 8px;
122
+ background-color: var(--g-color-base-simple-hover-solid);
123
+ cursor: pointer;
124
+ opacity: 0;
125
+ transition: 0.3s;
126
+ position: absolute;
101
127
  right: 24px;
102
128
  top: 24px;
103
129
  }
130
+ .pc-fullscreen-image__close-icon-wrapper:focus {
131
+ outline: 2px solid var(--g-color-line-focus);
132
+ outline-offset: 0;
133
+ }
134
+ .pc-fullscreen-image__close-icon-wrapper:focus:not(:focus-visible) {
135
+ outline: 0;
136
+ }
137
+ .pc-fullscreen-image__close-icon-wrapper:focus {
138
+ opacity: 1;
139
+ }
140
+ @media (max-width: 769px) {
141
+ .pc-fullscreen-image__close-icon-wrapper {
142
+ opacity: 1;
143
+ }
144
+ }
104
145
  .pc-fullscreen-image__icon {
105
146
  color: var(--g-color-text-hint);
106
147
  }
@@ -111,10 +152,4 @@ unpredictable css rules order in build */
111
152
  .pc-fullscreen-image__modal-image {
112
153
  width: 100%;
113
154
  }
114
- }
115
- @media (max-width: 769px) {
116
- .pc-fullscreen-image__icon-wrapper {
117
- right: 20px;
118
- top: 50px;
119
- }
120
155
  }
package/build/esm/components/FullscreenImage/FullscreenImage.js CHANGED
@@ -28,10 +28,10 @@ const FullscreenImage = (props) => {
28
28
  return (React.createElement("div", Object.assign({ className: b() }, extraProps),
29
29
  React.createElement("div", { className: b('image-wrapper') },
30
30
  React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
31
- React.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
31
+ React.createElement("button", { className: b('expand-icon-wrapper'), onClick: openModal },
32
32
  React.createElement(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
33
33
  isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }) },
34
- React.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
34
+ React.createElement("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
35
35
  React.createElement(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
36
36
  sliderData ? (React.createElement("div", { className: b('modal-slider') },
37
37
  React.createElement(SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: SliderType.FullscreenCard }, sliderData.items.map((item, index) => (React.createElement("div", { key: index, className: b('modal-slider_item') },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "5.27.1-alpha.0",
3
+ "version": "5.27.1-alpha.1",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {