<commit_before>/* Copyright 2017 Google Inc

   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.
*/

class ShareButton extends HTMLElement {

  static get observedAttributes() { return ['href', 'text']; }

  constructor() {
    super();
    
    this.attachShadow({mode:'open'});
    this.shadowRoot.appendChild(this._createTemplate());
    
    let root = this.shadowRoot;

    this.shareBtn = root.getElementById('share-btn');
    this.overlay = root.getElementById('overlay');
    this.url = root.getElementById('url');
    this.copy = root.getElementById('copy');
    this.mailto = root.getElementById('mailto');
    this.android = root.getElementById('android');
  }
  
  _createTemplate() {
    const framgent = document.createDocumentFragment();
      
    let styles = document.createElement('style');
    styles.innerHTML = `:host {
      display: inline-flex;
      --share-button-background-color: initial;   
      --share-button-border: 2px outset buttonface;
      --share-button-appearance: button;
      --share-button-border-radius: initial;
      --share-button-color: initial;
      --overlay-background-color: white;
      --overlay-background-border: 1px solid #ccc;
      min-width: 25px;
      min-height: 25px;
    }
          
    .visible {
      display: block !important;
    }
    
    #share-btn {
      -webkit-appearance: var(--share-button-appearance);
      -moz-appearance: var(--share-button-appearance);
      appearance: var(--share-button-appearance);
      border: var(--share-button-border);
      border-radius: var(--share-button-border-radius);
      color: var(--share-button-color);
      width: 100%;
      height: inherit;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-shrink: 1;
      text-transform: inherit;
      font: inherit;
    }
     
    #overlay {
      background-color: var(--overlay-background-color);
      display: none;
      padding: 1em;
      top: 0;
      margin: auto;
      left: 0;
      right: 0;
      max-width: 300px;
    }
    
    #overlay.visible {
      display: inline-block !important;
      border: var(--overlay-background-border);
      position: fixed;
    }
    
    #services {
      padding-left: 0;
    }
    
    #copy {
      display: none;
    }
    
    #copy.visible {
      display: block !important;
    }
    
    #copy {
      margin: 0 0 0 0.5em;
    }

    #mailto {
      margin: 0 0 0 0.5em;
    }
    
    #android {
      display: none;
      margin: 0 0 0 0.5em;
    }

    div.buttons {
      overflow-x: auto;
      display: flex;
      flex-direction: row;
    }
    
    slot[name=buttons]::slotted(*) {
      min-height: 1em;
      margin-top: 1em;
    }

    slot[name=clipboard]::slotted(*) {
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    slot[name=android]::slotted(*) {
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    slot[name=buttons]:empty {
      display: none;
    }
                    
    #android.visible {
      display: block !important;
    }
    
    #urlbar {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    #url {
      width: 100%;
      padding: 0.5em 0.5em;
    }`;

    const button = document.createElement('button');
    button.id='share-btn';
    button.innerHTML='<slot><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16c-.8 0-1.4.4-2 .8l-7-4v-1.5l7-4c.5.4 1.2.7 2 .7 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3v.7l-7 4C7.5 9.4 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.2 4.2v.6c0 1.6 1.2 3 2.8 3 1.6 0 3-1.4 3-3s-1.4-3-3-3z"/></svg></slot>';
    
    const overlay = document.createElement('div');
    overlay.id = 'overlay';
    overlay.innerHTML = `
      <div id="urlbar">
        <input type="url" id="url" />
        <button id="copy" aria-label="Copy to clipboard"><slot name="clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 1H4C3 1 2 2 2 3v14h2V3h12V1zm3 4H8C7 5 6 6 6 7v14c0 1 1 2 2 2h11c1 0 2-1 2-2V7c0-1-1-2-2-2zm0 16H8V7h11v14z"/></svg></slot></button>
        <button id="mailto" aria-lable="Mail to"><slot name="mailto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg></slot></button>
        <button id="android" aria-label="Share on Android"><slot name="android"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M6 18c0 .6.5 1 1 1h1v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h2v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h1c.6 0 1-.5 1-1V8H6v10zM3.5 8C2.7 8 2 8.7 2 9.5v7c0 .8.7 1.5 1.5 1.5S5 17.3 5 16.5v-7C5 8.7 4.3 8 3.5 8zm17 0c-.8 0-1.5.7-1.5 1.5v7c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-7c0-.8-.7-1.5-1.5-1.5zm-5-5.8L16.8 1c.2-.3.2-.6 0-.8-.2-.2-.5-.2-.7 0l-1.3 1.4C13.7 1.2 13 1 12 1c-1 0-2 .2-2.7.6L7.8 0H7v1l1.5 1C7 3.2 6 5 6 7h12c0-2-1-3.8-2.5-4.8zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></svg></slot></button>  
      </div><commit_msg>Adding Aria label to button that is visible.<commit_after>/* Copyright 2017 Google Inc

   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.
*/

class ShareButton extends HTMLElement {

  static get observedAttributes() { return ['href', 'text']; }

  constructor() {
    super();
    
    this.attachShadow({mode:'open'});
    this.shadowRoot.appendChild(this._createTemplate());
    
    let root = this.shadowRoot;

    this.shareBtn = root.getElementById('share-btn');
    this.overlay = root.getElementById('overlay');
    this.url = root.getElementById('url');
    this.copy = root.getElementById('copy');
    this.mailto = root.getElementById('mailto');
    this.android = root.getElementById('android');
  }
  
  _createTemplate() {
    const framgent = document.createDocumentFragment();
      
    let styles = document.createElement('style');
    styles.innerHTML = `:host {
      display: inline-flex;
      --share-button-background-color: initial;   
      --share-button-border: 2px outset buttonface;
      --share-button-appearance: button;
      --share-button-border-radius: initial;
      --share-button-color: initial;
      --overlay-background-color: white;
      --overlay-background-border: 1px solid #ccc;
      min-width: 25px;
      min-height: 25px;
    }
          
    .visible {
      display: block !important;
    }
    
    #share-btn {
      -webkit-appearance: var(--share-button-appearance);
      -moz-appearance: var(--share-button-appearance);
      appearance: var(--share-button-appearance);
      border: var(--share-button-border);
      border-radius: var(--share-button-border-radius);
      color: var(--share-button-color);
      width: 100%;
      height: inherit;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-shrink: 1;
      text-transform: inherit;
      font: inherit;
    }
     
    #overlay {
      background-color: var(--overlay-background-color);
      display: none;
      padding: 1em;
      top: 0;
      margin: auto;
      left: 0;
      right: 0;
      max-width: 300px;
    }
    
    #overlay.visible {
      display: inline-block !important;
      border: var(--overlay-background-border);
      position: fixed;
    }
    
    #services {
      padding-left: 0;
    }
    
    #copy {
      display: none;
    }
    
    #copy.visible {
      display: block !important;
    }
    
    #copy {
      margin: 0 0 0 0.5em;
    }

    #mailto {
      margin: 0 0 0 0.5em;
    }
    
    #android {
      display: none;
      margin: 0 0 0 0.5em;
    }

    div.buttons {
      overflow-x: auto;
      display: flex;
      flex-direction: row;
    }
    
    slot[name=buttons]::slotted(*) {
      min-height: 1em;
      margin-top: 1em;
    }

    slot[name=clipboard]::slotted(*) {
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    slot[name=android]::slotted(*) {
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    slot[name=buttons]:empty {
      display: none;
    }
                    
    #android.visible {
      display: block !important;
    }
    
    #urlbar {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    #url {
      width: 100%;
      padding: 0.5em 0.5em;
    }`;

    const button = document.createElement('button');
    button.id='share-btn';
    button.innerHTML='<slot><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16c-.8 0-1.4.4-2 .8l-7-4v-1.5l7-4c.5.4 1.2.7 2 .7 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3v.7l-7 4C7.5 9.4 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.2 4.2v.6c0 1.6 1.2 3 2.8 3 1.6 0 3-1.4 3-3s-1.4-3-3-3z"/></svg></slot>';
    button.setAttribute('aria-lable', 'Share URL');

    const overlay = document.createElement('div');
    overlay.id = 'overlay';
    overlay.innerHTML = `
      <div id="urlbar">
        <input type="url" id="url" />
        <button id="copy" aria-label="Copy to clipboard"><slot name="clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 1H4C3 1 2 2 2 3v14h2V3h12V1zm3 4H8C7 5 6 6 6 7v14c0 1 1 2 2 2h11c1 0 2-1 2-2V7c0-1-1-2-2-2zm0 16H8V7h11v14z"/></svg></slot></button>
        <button id="mailto" aria-lable="Mail to"><slot name="mailto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg></slot></button>
        <button id="android" aria-label="Share on Android"><slot name="android"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M6 18c0 .6.5 1 1 1h1v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h2v3.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V19h1c.6 0 1-.5 1-1V8H6v10zM3.5 8C2.7 8 2 8.7 2 9.5v7c0 .8.7 1.5 1.5 1.5S5 17.3 5 16.5v-7C5 8.7 4.3 8 3.5 8zm17 0c-.8 0-1.5.7-1.5 1.5v7c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-7c0-.8-.7-1.5-1.5-1.5zm-5-5.8L16.8 1c.2-.3.2-.6 0-.8-.2-.2-.5-.2-.7 0l-1.3 1.4C13.7 1.2 13 1 12 1c-1 0-2 .2-2.7.6L7.8 0H7v1l1.5 1C7 3.2 6 5 6 7h12c0-2-1-3.8-2.5-4.8zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></svg></slot></button>  
      </div>
{'fraction_non_alphanumeric': 0.16450476763164676, 'fraction_numerical': 0.09878876385190276, 'mean_word_length': 2.3017583664208736, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 10, 'xml': 8}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '714551', 'n_tokens_mistral': 5021, 'n_tokens_neox': 4477, 'n_words': 975}