@wordpress/block-editor/build/components/duotone/components.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DuotoneFilter = DuotoneFilter;
exports.DuotoneStylesheet = DuotoneStylesheet;
exports.DuotoneUnsetStylesheet = DuotoneUnsetStylesheet;
exports.PresetDuotoneFilter = PresetDuotoneFilter;

var _element = require("@wordpress/element");

var _components = require("@wordpress/components");

var _index = require("./index");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * SVG and stylesheet needed for rendering the duotone filter.
 *
 * @param {Object} props          Duotone props.
 * @param {string} props.selector Selector to apply the filter to.
 * @param {string} props.id       Unique id for this duotone filter.
 *
 * @return {WPElement} Duotone element.
 */
function DuotoneStylesheet({
  selector,
  id
}) {
  const css = `
${selector} {
	filter: url( #${id} );
}
`;
  return (0, _element.createElement)("style", null, css);
}
/**
 * Stylesheet for disabling a global styles duotone filter.
 *
 * @param {Object} props          Duotone props.
 * @param {string} props.selector Selector to disable the filter for.
 *
 * @return {WPElement} Filter none style element.
 */


function DuotoneUnsetStylesheet({
  selector
}) {
  const css = `
${selector} {
	filter: none;
}
`;
  return (0, _element.createElement)("style", null, css);
}
/**
 * The SVG part of the duotone filter.
 *
 * @param {Object}   props        Duotone props.
 * @param {string}   props.id     Unique id for this duotone filter.
 * @param {string[]} props.colors Color strings from dark to light.
 *
 * @return {WPElement} Duotone SVG.
 */


function DuotoneFilter({
  id,
  colors
}) {
  const values = (0, _index.__unstableGetValuesFromColors)(colors);
  return (0, _element.createElement)(_components.SVG, {
    xmlnsXlink: "http://www.w3.org/1999/xlink",
    viewBox: "0 0 0 0",
    width: "0",
    height: "0",
    focusable: "false",
    role: "none",
    style: {
      visibility: 'hidden',
      position: 'absolute',
      left: '-9999px',
      overflow: 'hidden'
    }
  }, (0, _element.createElement)("defs", null, (0, _element.createElement)("filter", {
    id: id
  }, (0, _element.createElement)("feColorMatrix", {
    // Use sRGB instead of linearRGB so transparency looks correct.
    colorInterpolationFilters: "sRGB",
    type: "matrix" // Use perceptual brightness to convert to grayscale.
    ,
    values: " .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "
  }), (0, _element.createElement)("feComponentTransfer", {
    // Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
    colorInterpolationFilters: "sRGB"
  }, (0, _element.createElement)("feFuncR", {
    type: "table",
    tableValues: values.r.join(' ')
  }), (0, _element.createElement)("feFuncG", {
    type: "table",
    tableValues: values.g.join(' ')
  }), (0, _element.createElement)("feFuncB", {
    type: "table",
    tableValues: values.b.join(' ')
  }), (0, _element.createElement)("feFuncA", {
    type: "table",
    tableValues: values.a.join(' ')
  })), (0, _element.createElement)("feComposite", {
    // Re-mask the image with the original transparency since the feColorMatrix above loses that information.
    in2: "SourceGraphic",
    operator: "in"
  }))));
}
/**
 * SVG from a duotone preset
 *
 * @param {Object} props        Duotone props.
 * @param {Object} props.preset Duotone preset settings.
 *
 * @return {WPElement} Duotone element.
 */


function PresetDuotoneFilter({
  preset
}) {
  return (0, _element.createElement)(DuotoneFilter, {
    id: `wp-duotone-${preset.slug}`,
    colors: preset.colors
  });
}
//# sourceMappingURL=components.js.map