✨Implement amp-stream-gallery (#26710)

Implements amp-stream-gallery, which is a carousel for showing multiple items at once. This is useful for things like related products and articles.

This differs from amp-base-carousel in the following ways:

1. Provides an API for specifying the min/max width per item. This determines how many items are visible at once based on the constraints and changes with the screen size.
2. Provides an API to configure the min/max visible slides at one time.
3. Allows configuration of inset/outset arrows.
4. Has different default styling for inset/outset arrows from amp-base-carousel.
5. Does not snap on slides by default.
6. Does not support automatic advancing of slides.

Fixes:

- Fix check for overlapping slide sometimes missing one slide (fix < to
<=).
- Pause layout internal to carousel implementation, rather than just
pausing auto advance.

For #20595

build-system/compile/bundles.config.js

@@ -927,6 +927,13 @@ exports.extensionBundles = [
     },
     type: TYPES.MISC,
   },
+  {
+    name: 'amp-stream-gallery',
+    version: '0.1',
+    latestVersion: '0.1',
+    options: {hasCss: true},
+    type: TYPES.MISC,
+  },
   {
     name: 'amp-selector',
     version: '0.1',

build-system/test-configs/dep-check-config.js

@@ -250,6 +250,11 @@ exports.rules = [
       'extensions/amp-carousel/0.2/amp-carousel.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
       'extensions/amp-inline-gallery/0.1/amp-inline-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
       'extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js->extensions/amp-base-carousel/0.1/carousel-events.js',
+      'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/action-source.js',
+      'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel.js',
+      'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
+      'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
+      'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/responsive-attributes.js',
 
       // Facebook components
       'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js',

extensions/amp-stream-gallery/0.1/amp-stream-gallery.css

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../../amp-base-carousel/0.1/carousel.css";
+@import "arrows.css";
+
+amp-stream-gallery .i-amphtml-carousel-content {
+  display: flex;
+}
+
+.i-amphtml-stream-gallery-slides {
+  order: 1;
+  flex-grow: 1;
+  min-width: 1px;
+}
+
+[i-amphtml-stream-gallery-extra-space="around"] {
+  justify-content: center;
+}
+
+amp-stream-gallery .i-amphtml-carousel-slotted > .i-amphtml-replaced-content {
+  /*
+   * Apply contain object-fit to all replaced content to avoid distorted ratios.
+   */
+  object-fit: contain;
+}